knockout.js - KO：如何订阅为后期处理更新的 UI？

Question

在我的页面中，我有一个下拉菜单（选择），然后是一个表格，两者都绑定到视图模型。当我更改下拉列表时，表格会刷新选择中与该项目关联的数据。

我想在填充表格后对其进行一些 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");
};

小提琴