我正在使用knockout.js创建一个评论系统,我在使用现有的jQuery函数进行模板操作方面遇到了一些问题。
一个例子是创建日期评论。我写了一个jQuery函数,使数据从5-5-2012
转到2 Days ago
。例如:
<ul data-bind="foreach: Comments">
<li data-bind="attr: { id: Id }" class="Comment">
<div data-bind="text: DateCreated" class="prettyDate"></div>
...
</li>
</ul>
<script type="text/javascript">
$(function(){
$(".prettyDate").prettify();
});
</script>
使用此代码,当我动态添加新评论时,日期保持5-5-2012
格式。还有其他一些自定义jQuery函数可以处理重复数据,这些函数现在由knockout动态创建(通常通过基于类选择)。
如何在knockout.js生成的动态数据上应用这些自定义jQuery函数?
答案 0 :(得分:4)
一个选项可能是使用自定义绑定处理程序,它通过jQuery插件发送绑定元素,例如:
http://jsfiddle.net/mikebridge/Q9r86/4/
另一种可能性是在视图模型中添加计算的observable。
答案 1 :(得分:0)
如果你需要在生成的DOM元素上运行一些进一步的自定义逻辑,你可以使用下面描述的任何afterRender / afterAdd / beforeRemove / beforeMove / afterMove回调。
<ul data-bind="foreach: { data: myItems, afterAdd: yellowFadeIn }">
<li data-bind="text: $data"></li>
</ul>
<button data-bind="click: addItem">Add</button>
<script type="text/javascript">
ko.applyBindings({
myItems: ko.observableArray([ 'A', 'B', 'C' ]),
yellowFadeIn: function(element, index, data) {
$(element).filter("li")
.animate({ backgroundColor: 'yellow' }, 200)
.animate({ backgroundColor: 'white' }, 800);
},
addItem: function() { this.myItems.push('New item'); }
});
</script>
但是,请注意以下注意事项:
如果您的目标实际上是在添加新DOM元素时将其他行为附加到新DOM元素(例如,事件处理程序或激活第三方UI控件),那么如果您实现新行为,您的工作将会更容易作为自定义绑定而不是