1

そのため、ユーザーに表示する必要のあるスケジュールのリストを用意し、ユーザーが現在どのスケジュールを使用しているかを示し、そのスケジュールにジャンプしたり、スケジュールから外れたりできるようにします。

私のビューモデルは次のようになります

self = this;
self.shifts = ko.observableArray();
self.selectedShifts = ko.observableArray();

//I populate self.shifts here with a WEB API call

//Run through each shift and check if current user is on it and set checked / not checked    value for checkbox
        ko.utils.arrayForEach(self.shifts(), function(shift) {

           //Clear array
            self.usersOnShift([]);

            //Populate array with all users on the shift
            self.usersOnShift = ko.observableArray(WEB API CALL HERE);

            var userInShift = ko.utils.arrayFirst(self.usersOnShift(), function(user) {
                if (selectedUserId == user.ID) {
                    return true;
                } 
            });

            if (userInShift) {

                self.selectedShifts.push(shift.ID);
            }
        });

ko.applyBindings(self);

私のHTMLは次のようになります

  <div class="simple_overlay" id="shiftOverlay">
        <div class="details">

            <div data-bind="foreach: shifts">

                <div><span class="staff-initials" data-bind="text:wardName">  </span><input type="checkbox" data-bind="value: ID, checked: $root.selectedShifts"/>  </div>
            </div>
            <div>
                <a href="#" data-bind="click: updateUserOnShifts">Connect</a>
                <a href="#" data-bind="click: closeShiftDialog">Close</a>
            </div>
        </div>
    </div>

チェックボックスの値が対応するシフトのIDに正しく設定されていることがわかります。ただし、問題のユーザーがオンになっていることがわかっているシフトはチェックされておらず、selectedShiftsobservableArrayに値が含まれていることがわかります。

どういうわけか、「checked：$ root.selectedShifts」呼び出し/チェックは機能していませんが、正しい値が含まれていることはわかっています。私は何が間違っているのですか？

4

2 に答える 2

10

問題は、値が整数であるということですが、checkbox要素にバインドされると、文字列になります。checkedバインディングが配列内の値を見つけようとすると、比較に厳密な等式を使用し、falseであるため、一致するものは見つかりません(2 === "2")。

この問題を回避する最も簡単な方法は、値を配列に追加するときに値を文字列に変換することです。

self.selectedShifts.push("" + shift.ID);

もちろん、これはモデルを変更する必要があることを意味し、それは優れたソリューションではない可能性があります。checkedInArrayあらゆるタイプの値を置き換えcheckedてサポートするカスタムバインディングを思いつきました。あなたはそれについて学び、それが実際に動いているのを見て、そしてそれを次のように使うことができます：

<input type="checkbox" data-bind="checkedInArray: {value: ID, array: $root.selectedShifts }" />

Knockout 2.3.0（まだ開発中）では、新しいバインディングがあり、バインディングでcheckedValue任意のタイプの値を使用できるようになりますchecked。そのバージョンを使用して、以下を使用するようにHTMLを更新できますcheckedValue。

<input type="checkbox" data-bind="checkedValue: ID, checked: $root.selectedShifts"/>
于 2013-03-22T02:10:38.567 に答える
0

shift.IDは観察可能なプロパティですか？そうである場合は、次のように配列に追加する必要があります。

self.selectedShifts.push(shift.ID());

それ以外の場合は、値ではなく、監視可能なもの全体を配列に追加するだけです。

于 2013-03-21T22:45:39.873 に答える