Question

我正在使用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函数？

Answer 1

一个选项可能是使用自定义绑定处理程序，它通过jQuery插件发送绑定元素，例如：

http://jsfiddle.net/mikebridge/Q9r86/4/

另一种可能性是在视图模型中添加计算的observable。

Answer 2

如果你需要在生成的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>

来源：http://knockoutjs.com/documentation/foreach-binding.html#note-7-post-processing-or-animating-the-generated-dom-elements

但是，请注意以下注意事项：

如果您的目标实际上是在添加新DOM元素时将其他行为附加到新DOM元素（例如，事件处理程序或激活第三方UI控件），那么如果您实现新行为，您的工作将会更容易作为自定义绑定而不是

将Knockout与jQuery混合使用

2 个答案: