0

[この問題を説明する最初の試みは、泥だらけでした。明快さの名の下にそれを大幅に作り直しました。惨めに失敗していないことを願っています...もう一度。]

詳細ペインにチェックボックスのリストが含まれているノックアウトを使用して、マスター/詳細ビューを設定しようとしています。Userオブジェクトの配列があり、各オブジェクトにはUserPermissionオブジェクトの配列があります。ここで、PermissionIdプロパティは、チェックボックスがオンになっているかどうかを判断する必要があります。

つまり、簡単に言うと、ユーザーのマスターリストがあり、そこから1つを選択して詳細を表示します。詳細ペインに、チェックボックスのリストがあります（使用可能なアクセス許可のリストから生成されます）。特定のチェックボックスがチェックされているかどうかは、現在のユーザーに関連付けられているUserPermissionオブジェクトの配列内の一致するPermissionIdの永続性によって決定される必要があります。

私の質問は、チェックされたバインディングにuser.UserPermissions.PermissionIdを使用するためのチェックボックスを取得するにはどうすればよいですか？

これがこれまでの私の試みのjsfiddleであり、これが私が試した別のアプローチです。

4

1 に答える 1

0

少しいじくり回した後、些細な変更ではありませんが、解決策があります。

あなたが持っていたものを微調整しようと何度か試みましたが、問題に別の方法でアプローチする必要があることが明らかになりました.

そこで、ビュー モデルの人口をビュー モデルの定義から分離することから始めました。

ビューモデルの定義は次のとおりです。

var AppViewModel = function() {
    var self = this;

    //list of client users
    self.users = ko.observableArray();

    //list of permissions available to this client
    self.permissions = ko.observableArray();

    //user to display in details area
    self.currentUser = ko.observable();

    //select user from the master list
    self.selectUser = function(u) {
        self.currentUser(u);
    };
}

これは、関数がデータが渡されることを期待していないことを除いて、あなたが持っていたものと同じです.

このビュー モデルのバインディングは次のようになります。

var viewModel = new AppViewModel();
ko.applyBindings(viewModel);
addPermissions(initialData.PermissionList);
addUserAccounts(initialData.UserList);

もちろん、関数addPermissionsとaddUserAccounts関数の詳細は結果のフィドルにあります。そのリンクを後で提供します。

最初に、チェックボックスがチェックされているかどうかに関係なくバインドするためのソリューションについて説明しましょう。

check の使用に関するドキュメントを調べたところ、例の 1 つで、バインドされた値が配列であることに気付きました。

UserAccountそのため、それを利用するために、クラスを作成しました。

var UserAccount = function() {
    var self = this;

    self.id = ko.observable();
    self.email = ko.observable();
    self.clientId = ko.observable();
    self.firstName = ko.observable();
    self.lastName = ko.observable();
    self.createdBy = ko.observable();
    self.userPermissions = ko.observableArray();
};

がUserAccountビュー モデルに追加されると、次の関数が使用されます。

var addUserAccount = function(data) {
    var userAccount = new UserAccount();
    userAccount.id(data.UserId);
    userAccount.email(data.UserEmail);
    userAccount.clientId(data.ClientId);
    userAccount.firstName(data.FirstName);
    userAccount.lastName(data.LastName);
    userAccount.createdBy(data.CreatedBy);

    for(var i = 0; i < data.UserPermissions.length; i++) {
        var permissionIdAsString = String(data.UserPermissions[i].PermissionId);
        userAccount.userPermissions.push(permissionIdAsString);
    }
    viewModel.users.push(userAccount);
};

この関数の for ループに注目してください。これは、UserPermissions 配列の各 PermissionId 値を の observableArray に追加するだけuserPermissionsですUserAccount。

Permissionまた、使用可能なアクセス許可は、次のクラスのインスタンスによってそれぞれ表されるようになったことにも注意してください。

var Permission = function() {
    var self = this;

    self.id = 0;
    self.name = '';
    self.description = '';
};

[これらのPermissionプロパティの値はここでは変更されないため、これらのオブザーバブルを作成する必要はありません。]

さて、すべての背景を考慮して、適切なチェックボックスがチェックされるようにチェックボックスをバインドする方法を次に示します。

<ul data-bind="foreach: $root.permissions">
    <li>
        <label>
            <input type="checkbox" 
                   data-bind="value: id, checked: $parent.userPermissions" />
                   &nbsp;<span data-bind="text:name" />
        </label>
    </li>
</ul>

このコードはwith: currentUserブロック内に表示されるため$parent 、 currentUser

私のソリューションを含むフィドルへのリンクは次のとおりです: http://jsfiddle.net/jimmym715/eByAa/

ああ、次のコードをビューに追加してuserPermissions、チェックボックスのチェック/チェック解除ごとに更新されていることを確認しました。

このソリューションがあなたのニーズに合っていることを願っています。ご不明な点がございましたら、お知らせください。

于 2012-07-28T23:21:12.197 に答える