Сложный объект передан в ko.mapping.fromJS

Question

У меня есть сложный объект, который я хочу передать в ko.mapping.fromJS, и моя проблема в том, что я хочу, чтобы одно поле было видимым, но другие свойства встречаются как нулевые или несуществующие на основе методов, которые я пробовал.

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

Целью этого было бы сделать qty доступным для редактирования, но inner.name остаются неизменными в текстовом поле. Это будет означать, что один является наблюдаемым, а другой - нет.

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

function viewModel() { 
    var self = this; 
    self.slots = ko.observableArray([]); 

    self.load = function() { 
     ko.mapping.fromJS(
      [ 
       { 'qty': 1, 'inner': { 'name': 'thing'} }, 
       { 'qty': 2, 'inner': { 'name': 'stuff'} } 
      ], 
      { 'include': ['qty'], 'ignore': ['inner.name'] }, 
      self.slots); 
    } 
}; 

ko.applyBindings(new viewModel()); 

<button data-bind="click: load">Go</button> 
<ul data-bind="foreach: slots"> 
    <li> 
     <span data-bind="text: qty"></span>&nbsp;<span data-bind="text: inner.name"></span><input data-bind="value: qty" /><input data-bind="value: inner.name" /> 
    </li> 
</ul> 

Answer 1

Вы должны использовать copy вместо ignore, потому что вы хотите иметь свойства там быть просто не наблюдается.

И поскольку вы непосредственно сопоставляете массив, конфигурация отображения становится немного сложной.

Вы не можете определить copy на уровне «root», потому что у вас есть массив в корне. Таким образом, вы должны поставить create функции для элементов и функции создания теперь можно указать copy параметров для свойств элемента:

ko.mapping.fromJS(
     [ 
      { 'qty': 1, 'inner': { 'name': 'thing'} }, 
      { 'qty': 2, 'inner': { 'name': 'stuff'} } 
     ], 
     { 
      create: function (options) { 
       return ko.mapping.fromJS(options.data, { 
        copy: ['inner.name'] 
       }) 
      } 
     }, 
     self.slots); 

Demo JSFiddle.