使用knockoutjs綁定ch​​eckboxlist

Question

我試圖使用knockoutjs綁定ch​​eckboxlist。 我有一個用戶相關的配置文件列表，我想要的是當頁面加載到初始化用戶配置文件的複選框列表。

這是我的代碼

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> 

我要檢查用戶的默認配置文件，並將其綁定。

謝謝。

Answer 1

您將要將輸入綁定到用戶配置文件對象上的checkedobservable。爲此，您需要創建一個配置文件視圖模型並將您的原始數據轉換爲該視圖模型的實例，以使其屬性可以被觀察到。您也可以使用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>