将Knockout与jQuery混合使用

时间:2012-05-09 01:57:48

标签: jquery jquery-templates knockout.js

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

2 个答案:

答案 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>

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

但是,请注意以下注意事项:

  

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