KO:如何订阅为后期处理更新的UI

Question

在我的页面中，我有一个下拉列表（select），然后是一个表，这两个表都绑定到视图模型。当我更改下拉列表时，表将刷新，其中包含与select中的该项目相关联的数据。

我想在填充表之后对它进行一些UI处理。我尝试订阅下拉选择（它确实被触发了，我的函数也被调用了），但在订阅完成后，表数据会被更新。

我想做的是使用一个简单的函数来更新表格背景行的颜色，比如：

updateRowBgColors = function (tableId) {
    $("#" + tableId + " tr:gt(0):odd").css("background-color", "#f7f7f7");
    $("#" + tableId + " tr:gt(0):even").css("background-color", "#fff");
};

是的，我知道我可以在html中为数据绑定中的交替行设置一个类，但这并不能回答我为什么不起作用的问题。

Answer 1

您可以将afterRender绑定与foreach绑定一起使用：

<table>
    <tbody data-bind="foreach: {data: people, afterRender: doYourThing}">
        <tr>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Number"></td>
        </tr>
    </tbody>
</table>

在你看来，模型是：

self.doYourThing = function(insertedDomElementArray, dataItem) {
    $('tr:odd').css("background-color", "#f7f7f7");
    $('tr:even').css("background-color", "#fff");
};

小提琴