剔除复选框启用依赖项

Question

我正在尝试使用依赖项启用复选框。
如果两个输入字段中的一些不为空，我想启用一个复选框。
这是我的 javascript 代码：

var GoogleContactsViewModel = function() {
        var _self = this;
        _self.GoogleContacts = ko.observable();
        _self.IsEnabled = function (item) {
            console.log(item);
            return item.GivenName.length || item.FamilyName.length;
        };
        _self.GetData = function() {
            $.ajax({
                url: "some url",
                method: "POST",
                success:function (dataFromServer) {
                    _self.GoogleContacts(dataFromServer);
                }
            });
        };
        _self.GetData();
    };
    ko.applyBindings(new GoogleContactsViewModel());

这里是html：

<table class="importContacts" data-bind="with: GoogleContacts">
    <thead>
        <tr>
            <th></th>
            <th>@CommonResource.LastNameColumn</th>
            <th>@CommonResource.NameColumn</th>
            <th>E-mail</th>
            <th>@CommonResource.MyEmployee</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: contacts">
        <tr>
            <td>
                <input type="checkbox" name="isImport" data-bind="value: FullName, enable: $root.IsEnabled($data)" />
            </td>
            <td>
                <input type="text" name="FamilyName" data-bind="value: FamilyName, valueUpdate: 'afterkeydown'" placeholder="@ContactResource.EnterLastName" />
            </td>
            <td>
                <input type="text" name="GivenName" data-bind="value: GivenName, valueUpdate: 'afterkeydown'" placeholder="@ContactResource.EnterName" />
            </td>
            <td>
                <span data-bind="text: Email"></span>
            </td>
            <td>
                <input type="checkbox" name="MyEmployee" value="" />
            </td>
        </tr>    
    </tbody>


</table>

它非常适合初始化..here is printscreen。但它不适用于更改，我的意思是在您填写任何空白字段后它不会启用。

Answer 1

你需要使用 ko.observables。您映射数据的方式是单向绑定。这意味着无法进行更新。

如果你看下面的函数，它增加了两个项目。首先，使用 ko.mapping 将你接收到的数据变成 ko.observables。其次，将计算函数添加到接收到的每一行数据中。

_self.GetData = function () {
    $.ajax({
        url: "some url",
        dataType: 'json',
        method: "POST",
        success: function (dataFromServer) {
        var localData = ko.mapping.fromJS(JSON.parse(contacts));
        var observArray = localData.contacts();
        for (var i = 0; i < observArray .length; i++) {
            observArray [i].IsEnabled = ko.computed({
              read: function () {
                console.log(this.GivenName());
                return this.GivenName().length || 
                    this.FamilyName().length;
            },
            owner: observArray [i]
           });
          }

            _self.GoogleContacts(localData);
            ko.applyBindings(_self);
        },
        error: function (result) {}
    });
};

另外，将 ko 启用绑定添加到您的复选框。

       <td>
            <input type="checkbox" name="MyEmployee" value="" 
                   data-bind="enable: IsEnabled " />
        </td>

---

编辑 - 更新 GetData 以使用下面的供应 JSFIDDLE