0

依存関係でチェックボックスを有効にしようとしています。
2 つの入力フィールドの一部が空でない場合、チェックボックスを有効にしたいと思います。
ここに私の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>

そして、それは初期化に完全に機能します..ここに printscreen があります。ただし、変更しても機能しません。つまり、空のフィールドに入力した後は有効になりません。

4

1 に答える 1

2

ko.observables を使用する必要があります。データをマッピングする方法は、一方向バインディングです。更新が不可能であることを意味します。

以下の関数を見ると、2 つの項目が追加されています。まず、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 enable バインディングを追加します。

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

編集 - 以下の供給 JSFIDDLE で動作するように GetData を更新しました

于 2012-11-12T10:14:32.740 に答える