0

ノックアウトについて質問があります。ここに HTML と Javascript の私のコードがあります。チェック ボックスをクリックすると、関連する isWaived がチェックされていないため、コードの問題点を教えてください。

<input type="checkbox" data-bind="checked: isWaived(0)">
<div data-bind="visible: isWaived(0)" >
    <div class="alert">
        You have waived coverage for this member0.
    </div>
</div>

ここに私のJavaScriptコードがあります

    function Member(idx, isWaived) {
        var self = this;
        self.idx = idx;
         self.isWaived = ko.observable(isWaived);

    }

    function ReviewCartViewModel() {
        var self = this;
        // Editable data


        self.members = ko.observableArray([
            new Member(0, true),
            new Member(1, false),
            new Member(2, false),
            new Member(3, false),
        ]);

        self.isWaived = function (idx) {
            for (var i in self.members()) {
                var member = self.members()[i];
                if (member.idx == idx)
                    return member.isWaived();
            }
        };

        self.DoWave = function (idxs) {
            for (var i in self.members()) {
                var member = self.members()[i];
                if (member.idx == idxs) {
                    member.isWaived(!member.isWaived());
                    //Send Ajax Request to waived the user
                }
            }
        };
    }

    ko.applyBindings(new ReviewCartViewModel());

これは、このスクリプトのフィドルページです http://jsfiddle.net/mohsenvafa/spMvd/

4

2 に答える 2

0

あなたの JavaScript は、おそらく少しオーバーエンジニアリングされています。適切なバインディングを使用すると、ルート モデルから isWaived 関数と DoWave 関数の両方を削除できます。これは、実用的なソリューションの jsfiddle です。

HTML

<!-- ko with:members()[0] -->
<div>
    <input type="checkbox" data-bind="checked:isWaived" />
</div>        
<div data-bind="visible:isWaived">
    <div class="alert">
        You have waived coverage for this member <span data-bind="text:idx"></span>.
    </div>
</div> 
<!-- /ko -->

Javascript

function Member(idx, isWaived) {
    var self = this;
    self.idx = idx;
    self.isWaived = ko.observable(isWaived);    
}

function ReviewCartViewModel() {
    var self = this;
    // Editable data   

    self.members = ko.observableArray([
        new Member(0, true),
        new Member(1, false),
        new Member(2, false),
        new Member(3, false),
    ]);
}

ko.applyBindings(new ReviewCartViewModel());
于 2013-05-23T23:28:16.470 に答える