knockout.js - 渲染后 knockout ，但只有一次

Question

我有一个简单的 observableArray，其中包含很多用户模型。
在标记中，有一个带有 foreach 循环的模板，该循环循环用户并将它们输出到一个简单的表格中。我还使用自定义滚动条和其他一些 javascript 设置表格样式。所以现在我必须知道 foreach 循环何时完成并且所有模型都添加到 DOM 中。

afterRender 回调的问题是每次添加某些内容时都会调用它，但我需要一种只触发一次的回调。

Answer 1

您最好的选择是使用自定义绑定(bind)。您可以将自定义绑定(bind)放在 foreach 之后。在您的data-bind 的绑定(bind)列表中或者你可以在 setTimeout 中执行你的代码允许 foreach在执行代码之前生成内容。

这是一个示例，它显示了一次运行代码和每次 observableArray 更新时运行的代码:http://jsfiddle.net/rniemeyer/Ampng/

HTML:

<table data-bind="foreach: items, updateTableOnce: true">
    <tr>
        <td data-bind="text: id"></td>
        <td data-bind="text: name"></td>
    </tr>
</table>

<hr/>

<table data-bind="foreach: items, updateTableEachTimeItChanges: true">
    <tr>
        <td data-bind="text: id"></td>
        <td data-bind="text: name"></td>
    </tr>
</table>

<button data-bind="click: addItem">Add Item</button>

JS:

var getRandomColor = function() {
   return 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';  
};

ko.bindingHandlers.updateTableOnce = {
    init: function(element) {
        $(element).css("color", getRandomColor());            
    }    
};

//this binding currently takes advantage of the fact that all bindings in a data-bind will be triggered together, so it can use the "foreach" dependencies
ko.bindingHandlers.updateTableEachTimeItChanges = {
    update: function(element) {    
        $(element).css("color", getRandomColor());  
    }    
};


var viewModel = {
    items: ko.observableArray([
        { id: 1, name: "one" },
        { id: 1, name: "one" },
        { id: 1, name: "one" }
    ]),
    addItem: function() {
        this.items.push({ id: 0, name: "new" });   
    }
};

ko.applyBindings(viewModel);