淘汰赛后,但只有一次

Question

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

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

Answer 1

您最好的选择是使用自定义绑定.您可以将自定义绑定放在您的绑定foreach列表中,data-bind也可以在a中执行代码,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);

Answer 2

我想出了一个骗子.在模板/ foreach块之后,立即添加以下代码:

<!--ko foreach: { data: ['1'], afterRender: YourAfterRenderFunction } -->
<!--/ko-->

Answer 3

一种快速而简单的方法是,在您的afterRender处理程序中,将当前项与列表中的最后一项进行比较.如果匹配,则这是afterRender运行的最后一次.