添加效果敲除“if”绑定
问题描述:
我在knockout.js文档中找到了关于如何在切换可见绑定时添加jquery效果或甚至使用'foreach'绑定的beforeRemove事件的示例。添加效果敲除“if”绑定
不过,我还没有找到如何切换时添加一个jQuery效果的“如果”结合
考虑下面的代码:
<table data-bind="with: myModel">
<tr data-bind="if: IsVisible">
<td>some string</td>
</tr>
</table>
我将如何添加一个jQuery淡入效果时,ISVISIBLE返回true?
答
您不能使用if
直接约束力,但使用自定义的if
内有约束力会做的伎俩:
<table data-bind="with: myModel">
<tr data-bind="if: IsVisible">
<!--ko fadeIn: true-->
<td>some string</td>
<!--/ko-->
</tr>
</table>
处理程序:
ko.bindingHandlers.fadeIn = {
init: function(element) {
$(ko.virtualElements.childNodes(element))
.filter(function() { return this.nodeType == 1; })
.hide()
.fadeIn();
}
};
ko.virtualElements.allowedBindings.fadeIn = true;
+0
梦幻般的答案 - 效果很好。非常感激! :d – 2015-09-03 14:48:23
最佳: **别**。如果更改DOM。创建一个新的绑定,如[淡入淡出绑定示例](http://knockoutjs.com/examples/animatedTransitions.html)所示。 – 2013-03-19 20:53:02
谢谢,但我不确定我了解你的回复。我想使用if绑定,因为我确实需要更改DOM。我应该创建一个自定义绑定来嵌入if绑定并添加一些jquery逻辑吗? – Sam 2013-03-19 20:57:57
'if'绑定在创建/移除元素(绑定的元素以及其下的所有元素)方面具有魔力。 *这会使'if'在尝试使用和转换时遇到很大问题* - 元素要么不存在,要么已经被删除。有可能“破解”它,但这是一个非常丑陋的混乱,我甚至不确定它会在任何地方都可靠地工作。除非要求DOM被修改*,否则只需使用自定义绑定即可应用影响,而不会改变DOM。 – 2013-03-19 21:04:42