связывания массива данных с помощью отображения Нокаут плагина

Question

У меня есть следующие JSON данные:

var donutData = [ { 
"id": "0001", 
"type": "donut", 
"name": "Cake", 
"ppu": 0.55, 
"topping": 
    [ 
     { "id": "5001", "type": "None", "price": 45.00 }, 
     { "id": "5002", "type": "Glazed", "price": 45.00 }, 
     { "id": "5005", "type": "Sugar", "price": 45.00 }, 
     { "id": "5007", "type": "Powdered Sugar", "price": 45.00 }, 
     { "id": "5006", "type": "Chocolate with Sprinkles", "price": 45.00 }, 
     { "id": "5003", "type": "Chocolate", "price": 45.00 }, 
     { "id": "5004", "type": "Maple", "price": 45.00 } 
    ] 
    }, 
    { "id": "0002", 
     "type": "donut", 
     "name": "Lava Cake", 
     "ppu": 0.65, 
     "topping": 
    [ 
     { "id": "5001", "type": "None", "price": 45.00 }, 
     { "id": "5002", "type": "Glazed", "price": 45.00 }, 
     { "id": "5005", "type": "Sugar", "price": 45.00 }, 
     { "id": "5007", "type": "Powdered Sugar", "price": 45.00 }, 
     { "id": "5006", "type": "Chocolate with Sprinkles", "price": 45.00       }, 
     { "id": "5003", "type": "Chocolate", "price": 45.00 }, 
     { "id": "5004", "type": "Maple", "price": 45.00 } 
    ] 
    } 

]

Я мог бы легко данные связать это с моей HTML страницы, используя следующий:

var DonutViewModel = function(){ 
donuts = ko.observableArray(); 

} 

$(document).ready(function() { 
    ko.applyBindings(DonutViewModel(donutData)); 
}); 

А вот мой HTML:

<tbody data-bind="foreach:donuts"> 
<tr> 
    <td data-bind="text:id"></td> 
    <td data-bind="text:type"></td> 
    <td data-bind="text:name"></td> 
    <td data-bind="text:ppu"></td> 
    <td> 
     <table> 
      <tbody data-bind="foreach:topping"> 
       <tr> 
        <td data-bind="text:type"></td> 
       </tr> 
      </tbody> 
     </table> 
    </td> 
    <td> 
     <table> 
      <tbody data-bind="foreach:topping"> 
       <tr> 
        <td data-bind="text:price"></td> 
       </tr> 
      </tbody> 
     </table> 
    </td> 
</tr> 
</tbody> 

Теперь я хочу сделать то же самое с помощью плагина отображения нокаута. я попробовал следующее:

$(document).ready(function() { 
var viewModel = ko.mapping.fromJS(donutData); 
ko.applyBindings(viewModel()); 
//ko.applyBindings(DonutViewModel(donutData)); 
}); 

это дает мне ошибку - очевидно, потому что я использовал данные привязывать = «Foreach: пончики», который больше не существует в моем ViewModel. Итак, как я могу изменить свой пользовательский интерфейс или данные, чтобы работать над этим?

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

Answer 1

Посмотрите, какие свойства находятся в вашем представленииModel после того, как вы вызвали плагин сопоставления. Глядя на ваш json, у вас нет собственности, называемой пончики. Вы, вероятно, следует создать свой ViewModel, а затем использовать отображение плагин для его обновления:

var viewModel = DonutViewModel(); 
viewModel.donuts = ko.mapping.fromJS(donutData); 

Чтобы добавить новый пончик в массив, просто использовать толчок:

viewModel.donuts.push(/*js representation of a donut*/);