Select2 с нокаутом, как отображать выбранные элементы в списке?

Question

У меня есть элемент управления select2 с множественным выбором для отображения ролей пользователя, и я получаю выбранную коллекцию запросов с сервера, а select2 требует только идентификатора выбранного элемента, но не всей коллекции.

<select multiple="multiple" 
data-bind="options: AllRoles, optionsValue: 'Id', optionsText: 'Name', selectedOptions: selectedRole, select2: {}"></select> 

Я выбрал роли как коллекцию в наблюдаемом массиве, но select2 требует набора строки для отображения выбранных элементов.

AllRoles = ko.observableArray([{Id: '111', Name: 'Test'}, {Id: '2222', Name: 'TTTTT'}]); 
selectedRole = ko.observableArray(["111","2222"]); 
??? selectedRoles = ko.observableArray([{Id: '111', Name: 'Test'}, {Id: '2222', Name: 'TTTTT'}]); 

Что является лучшим способом решить эту проблему, если у меня есть отдельный массив строк или я могу сделать это с существующей коллекцией?

Вот пример fiddle

Answer 1

Я предполагаю, что проблема в том, что у вас есть массив объектов с сервера, и вы хотите использовать это в качестве источника для того, что элементы предварительно выбирается в нижнем выпадающем меню вашей скрипки?

Если это так, проблема заключается в том, что при установке selectedOptions: selectedRoles нокаут будет перезаписывать это, поскольку он не может вывести выбранные элементы из списка, содержащего объекты, когда выбранные значения являются строками. Однако вы можете сделать вычисленную переменную, которая приспосабливает массив selectedRoles. Связывание selectedOptions может использовать это просто отлично.

self.selectedRolesComp = ko.computed(function() { 
    var l = []; 
    for(var i = 0; i < self.selectedRoles().length; i++) { 
     l.push(self.selectedRoles()[i].Id); 
    } 
    return l; 
}); 

Как скрипку http://jsfiddle.net/WGukF/2/

Возьмите еще посмотреть на http://knockoutjs.com/documentation/computedObservables.html больше.