4

我正在使用 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 函数作用于重复数据，这些数据现在由敲除动态创建（通常通过基于类的选择）。

如何将这些自定义 jQuery 函数应用于由 knockout.js 生成的动态数据？

4

2 回答 2

4

一种选择可能是使用自定义绑定处理程序，该处理程序通过您的 jQuery 插件发送绑定元素，例如：

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

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

于 2012-05-09T06:15:53.793 回答
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 元素时将其他行为附加到它们（例如，事件处理程序或激活第三方 UI 控件），那么如果您将新行为作为自定义实现，您的工作会容易得多改为绑定

于 2015-02-20T14:02:04.617 回答