【问题标题】:Table not updated when ko.observablearray changesko.observablearray 更改时表未更新
【发布时间】:2013-08-15 13:06:15
【问题描述】:

我将 ko.observablearray 绑定到一个表。数组中的每个对象(称为“组”)都绑定到一个表。每个组都持有另一个(非淘汰赛)代码数组。每个代码都绑定到一行。每个代码都有一个布尔值,绑定到一个复选框。

如果组中的布尔值都不为真,我希望启用该组的所有复选框。如果组中至少有一个布尔值是 true,我希望禁用该组的 false 复选框,并启用 true 复选框。加载页面后,这将按预期工作;但是,当我选中或取消选中某个框时,框的启用/禁用状态不会改变。用调试器看,observablearray 正在更新,但是表中的数据没有。

页面:

<table data-bind="foreach: {data: Groups}">
    <thead>
        <tr>
            <th colspan="3" data-bind="text: GroupName"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: {data: Codes}">
        <tr>
            <td data-bind="text: CodeId"></td>
            <td data-bind="text: Desc"></td>
            <td>
                <input type="checkbox" data-bind="checked: Prime, disable: $root.HasPrime($parent) && !Prime" />
            </td>
        </tr>
    </tbody>
</table>

测试组中是否有真值的Javascript函数:

var HasPrime = function (gr) {
    for (var i = 0; i < gr.Codes.length; i++) {
        if (gr.Codes[i].Prime === true) {
            return true;
        }
    }
    return false;
};

小提琴:http://jsfiddle.net/NSLPu/2/

【问题讨论】:

    标签: knockout.js ko.observablearray


    【解决方案1】:

    如果您想要双向绑定,您需要使事物可观察。在您的情况下,Prime 属性必须是可观察的:

    var code1 = {
        'CodeId': 123,
            'Desc': 'Code 1',
            'Prime': ko.observable(false) // <---- changed!
    };
    

    这将需要对您的其余代码进行一些相应的更改:

    • 普通 JS 调用必须调用 Prime 作为获取当前值的方法
    • “做事”的绑定(如在输入上的否定)也需要调用 observable 来获得否定的值

    请参阅this fiddle 了解更新。

    【讨论】:

    • 我一定错过了 observablearrays 仅用作单向绑定的地方。谢谢!
    • 数组本身是双向的:如果您添加或删除项目,它将自动更新 UI。数组中的 items 是另一回事。
    猜你喜欢
    • 2013-12-23
    • 1970-01-01
    • 2021-11-13
    • 2013-03-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-01
    • 1970-01-01
    相关资源
    最近更新 更多