1

私はノックアウトを学んでおり、選択可能なユーザーのリストを作成するページを作成しようとしていました。JSFiddle: http://jsfiddle.net/Just/XtzJk/3/ (データ割り当てを正しく取得できません)。

以下のようにコントローラーを呼び出すと、ページでデータ割り当てが機能し、期待どおりにコントロールにバインドされます

$.getJSON("/Wizard/GetUsers",function(allData){
        var mappedUsers = $.map(allData.AllUsers, function(item){return new User(item)});
        self.AllUsers(mappedUsers);
        if(allData.SelectedUsers != null){
        var mappedSelectedUsers = $.map(allData.SelectedUsers, function(item){return new User(item)});
        self.SelectedUsers(mappedSelectedUsers);}
    });

問題:

a.) 私が書いた JSFiddle の何が問題になっていますか? 動作しました。

b.) 私のコードでは、選択したチェックボックスの関数を呼び出すことができますが、関数で受け取った "User" パラメータに格納されている値を取得できません。Chrome JS コンソールでは、ユーザー オブジェクトに正しい値が保存されていることがわかりますが、それを取得できません。ko.toJS() を実行してこれを取得しました。

ありがとう。

編集: OK、JSFiddle が機能するようになりました。フレームワークで Knockout.js を選択する必要がありました。更新されたフィドル: http://jsfiddle.net/Just/XtzJk/5/

また、選択したチェックボックスの値を取得するために私がやった

ko.toJS(user).userName

しかし、リストから値を選択し、クリックして別の「選択済み」リストに移動し、前のものから値を削除するというアプローチをとると思います。KnockoutJS: How to add one observableArray to another?この投稿からこのアイデアを得ました:

4

1 に答える 1

8

OK、私はあなたが必要とする解決策を持っていると思います...

の監視可能な配列を設定することから始め、これを次のように要素selectedUserNamesに適用しました。<li>

<input type="checkbox" 
       name="checkedUser" 
       data-bind="value: userName, checked:$root.selectedUserNames" />

[注: バインディングを宣言するvalue前に宣言することが重要checkedです。これには少し戸惑いました…毎日何か新しいことを学びましょう!]

チェックされたバインディングに userName 値の配列をバインドするのはなぜですか? 配列がcheckedバインディングに渡されると、KO は各チェックボックスの値を配列内の値と比較し、checkedその値がその配列内にあるすべてのチェックボックスをチェックします。（おそらくKOのドキュメントでよりよく説明されています）

次に、SelectedUsers の observableArray を残したまま、次のように手動サブスクリプションをセットアップしてデータを入力しました。

self.selectedUserNames.subscribe(function(newValue) {
    var newSelectedUserNames = newValue;
    var newSelectedUsers = [];
    ko.utils.arrayForEach(newSelectedUserNames, function(userName) {
        var selectedUser = ko.utils.arrayFirst(self.AllUsers(), function(user) {
            return (user.userName() === userName);
        });
        newSelectedUsers.push(selectedUser);
    });
    self.SelectedUsers(newSelectedUsers);
});

[私はもともと、selectedUserNames に読み取りと書き込みの両方の機能を持つ依存オブザーバブル (ko.computed) をセットアップしようとしましたが、チェックボックスにはそれがありませんでした。]

このサブスクリプション関数は、新しい配列を調べ、その配列内の値に一致するselectedUserNamesユーザーを検索し、AllUsers一致するオブジェクトを配列にプッシュします...実際には、一致する各オブジェクトを一時配列にプッシュし、その一時配列を に割り当てますが、目標は達成されました。配列には、必要なものが常に含まれるようになりました。userNameselectedUserNamesUserSelectedUsersUserSelectedUsersSelectedUsers

ああ、私はほとんど忘れていました…ここに私が作成したフィドルがあるので、あなたは完全な解決策を手に入れました：http://jsfiddle.net/jimmym715/G2hxP/

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2012-08-24T16:23:52.477 に答える