Отображение KnockoutJs для просмотра сложного свойства модели

Question

Я новичок в нокауте и пробовал то, что я думал, было бы простым сценарием, но его просто не работало. Ни один из двух изменений ввода при изменении выбора, а список выбора не инициализируется выбранному формату.

HTML:

<input type="text" data-bind="value: selectedFormat.id" /> 
<input type="text" data-bind="enable: selectedFormat.fields()[0].enabled" /> 

<select data-bind="options: formats, optionsText: 'name', value: selectedFormat" /> 

JS:

var data = { 
    formats: [ 
     { id: 1, name: 'Format 1', fields: [ 
      { id: 1, enabled: true }, 
      ]}, 
     { id: 2, name: 'Format 2', fields: [ 
      { id: 1, enabled: false }, 
      ]} 
     ], 
    selectedFormat: 
     { id: 2, name: 'Format 2', fields: [ 
      { id: 1, enabled: false }, 
      ]} 
    } 

var vm = ko.mapping.fromJS(data); 

ko.applyBindings(vm); 

http://jsfiddle.net/paulbau/ZnqNN/1/

Answer 1

Вы почти там в вашей скрипке, все части есть они просто должны быть подключения.

Плагин отображения объявлений не создает автоматически наблюдаемые свойства, содержащие объект комплекса. Таким образом, по умолчанию ваш selectedFormat не будет наблюдаемым после отображения. Потому что вы хотите написать value: selectedFormat он должен быть его наблюдаемым поэтому вам нужна пользовательские настройки отображения, которая делает selectedFormat наблюдаемую:

var mapping = { 
    'selectedFormat': { 
     create: function(options) { 
      return ko.observable(ko.mapping.fromJS(options.data)); 
     } 
    } 
} 

Если вы определяемой в create функцию, то вы ответственны отображение его значения, так что вам нужно вызовите ko.mapping.fromJS внутри функции создания с options.data, чтобы отобразить значения внутри selectedFormat также наблюдаемые.

Тогда вам нужно сказать ko.mapping использовать отображение конфигурацию с:

var vm = ko.mapping.fromJS(data, mapping); 

А теперь просто нужно изменить привязки, потому что selectedFormat будет наблюдаемым так что вам нужно, чтобы получить его значение с selectedFormat():

<input type="text" data-bind="value: selectedFormat().id" /> 
<input type="text" data-bind="enable: selectedFormat().fields()[0].enabled" /> 

Demo JSFiddle.

Если вы хотите начальную селекционную работу, то ваша карта пинг необходимо для поиска выбранного элемента по идентификатору вместо создания нового объекта:

var mapping = { 
    'selectedFormat': { 
     create: function(options) { 
      var selected = ko.utils.arrayFirst(options.parent.formats(), 
       function(item){ 
        return item.id() == options.data.id; 
      }); 
      return ko.observable(selected); 
     } 
    } 
} 

Demo JSFiddle.