可以在Knockout中创建自定义if绑定
Possible to create a custom if binding in Knockout
我想创建一个"fadeInIf"自定义绑定。我的想法是等于"fadeVisible"从:http://knockoutjs.com/examples/animatedTransitions.html:
// Here's a custom Knockout binding that makes elements shown/hidden via jQuery's fadeIn()/fadeOut() methods
// Could be stored in a separate utility library
ko.bindingHandlers.fadeVisible = {
init: function(element, valueAccessor) {
// Initially set the element to be instantly visible/hidden depending on the value
var value = valueAccessor();
$(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
},
update: function(element, valueAccessor) {
// Whenever the value subsequently changes, slowly fade the element in or out
var value = valueAccessor();
ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
}
};
我对自定义绑定很陌生,但我认为它可能是这样的:
ko.bindingHandlers.fadeInIf = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = valueAccessor();
$(element).toggle(ko.utils.unwrapObservable(value));
ko.bindingHandlers.if.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = valueAccessor();
if (ko.utils.unwrapObservable(value))
$(element).fadeIn();
ko.bindingHandlers.if.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
}
};
我已经得到了"fadeVisible"的工作,但不能工作这个,我错过了什么?
谢谢你的建议。我终于让它工作了,我错过了controlsDescendantBindings选项。结果如下:
ko.bindingHandlers.fadeIf = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = valueAccessor();
$(element).toggle(ko.utils.unwrapObservable(value));
ko.bindingHandlers['if'].init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
return { controlsDescendantBindings: value };
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = valueAccessor();
if (ko.utils.unwrapObservable(value)) {
ko.bindingHandlers['if'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
$(element).fadeIn();
}
else {
$(element).fadeOut(200, function () {
ko.bindingHandlers['if'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
});
}
}
};
我认为你在99%的情况下是正确的,但是在第一次之后渐变就不会完成了…我认为这与"if"绑定处理程序的工作方式有关。我所做的是改变这个:
if (ko.utils.unwrapObservable(value))
$(element).fadeIn();
这:
if (ko.utils.unwrapObservable(value)) {
$(element).toggle(false);
$(element).fadeIn();
}
如果你想检查的话,我已经保存了一段时间。
相关文章:
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- jQuery自定义验证比较多个输入的序列
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 在wordpress一定时间后更改自定义字段
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- 自定义函数中的光标位置
- 用于检查数组中是否存在元素的javascript自定义方法
- 如何创建自定义属性以添加if.bind
- jQuery 在自定义方法中使用 if 语句进行验证
- KnockoutJS:将if绑定封装在自定义绑定中
- if/else jQuery 使用自定义属性
- Handlebars,if else-if自定义辅助对象
- Angular.js中自定义占位符指令中的If语句
- Ng-if, ng-show还是自定义指令?关于最佳实践的建议
- 可以在Knockout中创建自定义if绑定
- 自定义指令在ng-if中第二次绑定不正确
- 从自定义helper调用Handlebars if helper
- 在JS中使用带有自定义参数的if语句
- AngularJS: ng-if和ng-repeat在自定义导入后不起作用