Нокаут не будет обрабатывать числовой массив для множественного списка выбора

Question

Я пытаюсь получить числовой массив для привязки к элементу select. Я использую числовой массив, потому что это то, что возвращает сервер. У меня есть установка jsFiddle, демонстрирующая проблему.

HTML

<select data-bind="selectedOptions: EnvironmentIds" id="EnvironmentIds" multiple="multiple" name="EnvironmentIds"> 
    <option selected="selected" value="1">Hosting</option> 
    <option value="2">Internal</option> 
</select> 

Script

function IncidentViewModel() { 
    var self = this; 

    //Properties 
    self.EnvironmentIds = ko.observableArray([1]); 
} 

var incidentViewModel = new IncidentViewModel(); 
ko.applyBindings(incidentViewModel); 

Если вы просто переключиться на массив строк, как так:

ko.observableArray(["1"]) 

Затем код работает, как ожидалось. Однако я не хочу использовать строковый массив, поскольку это не тип данных. Есть ли способ обойти это или я пропустил что-то простое?

Answer 1

options вяжущие виды использования KNOCKOUT в ko.selectExtensions дать option элементы значение нестроковой. Простой пользовательский привязку может сделать это с существующими опциями.

ko.bindingHandlers.makeOptionsNumeric = { 
    init: function(element) { 
     ko.utils.arrayForEach(element.options, function(option) { 
      ko.selectExtensions.writeValue(option, +option.value); 
     }); 
    } 
}; 

Добавьте к этим креплениям для select элемента.

data-bind="makeOptionsNumeric, selectedOptions: EnvironmentIds" 

Порядок важен. makeOptionsNumeric должен работать до selectedOptions. Если вы еще не используете Knockout 3.0, вам нужно указать некоторое фиктивное значение для привязки (например, makeOptionsNumeric: {}).

jsFiddle: http://jsfiddle.net/mbest/gUdPq/

Answer 2

JS:

function IncidentViewModel() { 
    var self = this; 

    //Properties 
    self.Environments = [{id: 1, name: 'Hosting'}, {id: 2, name: 'Internal'}] 
    self.EnvironmentIds = ko.observableArray([1]); 
} 

var incidentViewModel = new IncidentViewModel(); 
ko.applyBindings(incidentViewModel); 

HTML:

<select data-bind="options: Environments, 
    optionsText: 'name', 
    optionsValue: 'id', 
    selectedOptions: EnvironmentIds" id="EnvironmentIds" multiple="multiple" name="EnvironmentIds"> 
</select>