Loại bỏ nhiều lựa chọnTùy chọn được chọn không được chọn khi tải

Question

Tôi đang tạo biểu mẫu chỉnh sửa cho người dùng, vai trò của người dùng không được chọn theo mặc định trong nhiều lựa chọn.

Có 2 vai trò ứng dụng: "Quản trị viên" và "Người kiểm duyệt". Người dùng mẫu có 1 vai trò là "Quản trị viên". Cái này không được chọn theo mặc định.

http://jsfiddle.net/jgT8s/4/

html:

<form data-bind="with: user"> 
    <select id="selectRoles" 
     data-bind="options: $root.allRoles, selectedOptions: Roles, optionsText: 'Name', optionsValue: 'Id'" 
     multiple="true" 
     size="5"> 
    </select> 
</form> 

js:

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

    self.Id = ko.observable(1337); 
    self.Username = ko.observable('pietpaulusma'); 
    self.Roles = ko.observableArray([{ Id: 1, Name: 'Administrator' }]); 
}; 

function UserViewModel() { 
    var self = this; 

    self.user = ko.observable(new User()); 
    self.allRoles = ko.observableArray([{ Id: 1, Name: 'Administrator' }, { Id: 2, Name: 'Moderator' }]); 
} 

ko.applyBindings(new UserViewModel()); 

CẬP NHẬT tạo một dependentObservable và ánh xạ mà một đến selectedOptions

self.RoleIds = ko.dependentObservable(function() { 
     return ko.utils.arrayMap(self.Roles(), function (role) { 
      return role.Id; 
     }); 
    }); 

phiên bản làm việc: http://jsfiddle.net/jgT8s/5/

Answer 1

Vấn đề là Roles chứa "đầy đủ" đối tượng trong khi nó chỉ nên chứa phần giá trị:

self.Roles = ko.observableArray([1]); 

Hãy xem ở đây: http://jsfiddle.net/Vkda5/

Answer 2

Knockout cần phải so sánh tùy chọn đã chọn theo giá trị, đó là Id trong trường hợp này: optionsValue: 'Id'. Và bạn đang truyền một mảng các đối tượng Role. Bạn cần phải vượt qua hàng loạt các Id thay vì:

var User = function() { 
    ... 
    self.Roles = ko.observableArray([1]); 
};