Knockout checkbox enable dependencies

问题

I'm trying to make checkbox enabling with dependencies.
I'd like to enable a checkbox if some of two input fields are not empty.
here is my javascript code:

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());

here is 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>

and it works perfectly for initializing.. here is printscreen. But it doesn't work with changes, i mean that after you filling any of empty field it doesn't enable.

回答1:

You need to use ko.observables. The way you are mapping your data, it is a 1-way binding. Meaning that no updates are possible.

If you look at the function below, it adds two items. First, uses ko.mapping to make your received data into ko.observables. Second, add the computed function to each row of the received data.

_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) {}
    });
};

Also, add the ko enable binding to your checkbox.

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

EDIT - Updated GetData to work with supply JSFIDDLE below

来源：https://stackoverflow.com/questions/13335762/knockout-checkbox-enable-dependencies

标签

javascript

knockout.js