使用 knockoutjs 绑定复选框列表答案

【问题标题】：bind a checkboxlist using knockoutjs使用 knockoutjs 绑定复选框列表
【发布时间】：2012-11-23 13:33:46
【问题描述】：

我正在尝试使用 knockoutjs 绑定复选框列表。我有一个与配置文件列表相关的用户，我想要的是在加载页面时使用用户配置文件初始化复选框列表。

这是我的代码

var userProfileList = [];
var jsonUserAdminModel = null;
var viewModel = {
    ,firstName: ko.observable()
    ,lastName: ko.observable()
    ,userId: ko.observable()
    ,userProfiles: ko.observableArray(userProfileList)
    ,result: ko.observable()
};

viewModel.result = ko.computed(function () {
    jsonUserAdminModel = {
        UserId: (this.userId() != undefined ? this.userId() : null)
        ,FirstName: (this.firstName() != undefined ? this.firstName() : null)
        ,LastName: (this.lastName() != undefined ? this.lastName() : null)            
    }
    return jsonUserAdminModel;
}, viewModel);

$(document).ready(function () {               
        ko.applyBindings(viewModel);
        //Init the list of all profiles
        viewModel.userProfiles(@Html.Raw(Json.Encode(Model.Profiles)));
    });

HTML

<div id="UserProfiles" data-bind="foreach: userProfiles" style="margin: 10px">
    <input type="checkbox" data-bind="value: ProfileId" /><span data-bind="text: Name"></span>
</div>

我想检查用户默认配置文件并绑定它。

谢谢。

【问题讨论】：

不太清楚你在这里问什么。
请为此分享 jsFiddle，这将很容易诊断问题。

标签： asp.net-mvc model-view-controller knockout.js

【解决方案1】：

您将希望将输入绑定到用户配置文件对象上的checked observable。为此，您将需要创建一个配置文件视图模型并将您的原始数据转换为该视图模型的实例，以便它们的属性可以被观察到。您也可以使用ko.mapping 插件来实现这一点。

那么您的 HTML 将如下所示：

<div id="UserProfiles" data-bind="foreach: userProfiles" style="margin: 10px">
    <input type="checkbox" data-bind="attr: {value: ProfileId() }, checked: isChecked" /><span data-bind="text: Name"></span>
</div>

【讨论】：