Knockout.js 复选框的双向绑定不起作用

Question

我是 knockout.js 的新手，我在复选框的双向绑定方面遇到了一些问题。

我有一个绑定到 "companies" 列表的 table。

<table>
    <thead>
        <tr>
            <th>...</th>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: companies">
        <tr>                
            <td>...</td>
            <td><input type="checkbox" data-bind="checked:isCompanyForCommunication, click:$root.checkedNewCompanyForCommunication" /></td>
            <td>...</td>
        </tr>
    </tbody>
</table>

但是table中应该只有1家公司有isCompanyForCommunication = true。所以当另一个复选框被选中时，我必须将所有其他公司设置为 isCompanyForCommunication = false。因此，我在 viewModel 中创建了一个方法来取消选中所有其他公司。

    // Definition of Company
    var Company = function (crmAccountObject, contactId, companyForCommunicationId) {

        this.isCompanyForCommunication = ko.observable(false);
    }

    // Definition of the ViewModel
    var ViewModel = function () {
        var self = this;

        // ...

        // Lists
        this.companies = null; // This observableArray is set somewhere else

        // Events
        this.checkedNewCompanyForCommunication = function (company, event) {

            // Set all companies to False
            for (var i = 0; i < self.companies().length; i++) {
                self.companies()[i].isCompanyForCommunication = ko.observable(false);
            }

            // Set the "checked" company to TRUE
            company.isCompanyForCommunication = ko.observable(true);
            return true;
        }
    }

但是，这些更改并未反映在 HTML 页面中。所有其他复选框保持选中状态。

我在 jsfiddle 中创建了一个简单的例子来展示我想用复选框实现什么 https://jsfiddle.net/htZfX/59/

有人知道我做错了什么吗？提前致谢！

Answer 1

您没有设置 isCompanyForCommunication 的值，而是用新的 observable 覆盖它。

Observable 是函数，要更新它们，您需要使用新值作为参数调用它们：

this.checkedNewCompanyForCommunication = function (company, event) {

            // Set all companies to False
            for (var i = 0; i < self.companies().length; i++) {
                self.companies()[i].isCompanyForCommunication(false);
            }

            // Set the "checked" company to TRUE
            company.isCompanyForCommunication(true);
            return true;
        }

我还更新了您的示例代码：JSFiddle。

Knockout.js 复选框的双向绑定不起作用

Knockout.js two-way binding for checkbox not working

javascript

checkbox

binding

knockout.js