knockoutjs пользовательские элементы (компоненты), свойства viewmodel undefined

Question

im застрял немного с knockoutjs.
У вас проблема: fiddle.
Я добавил там упрощенную логику.
Вскоре у меня есть список продуктов, я должен заполнить его с сервера, и при нажатии на элемент продукта мне нужны данные о продукте (с наблюдаемыми), поэтому я могу обновить другие модели представлений.
Обратите внимание, что не все свойства являются наблюдаемыми (названия продуктов и т. Д., Не меняются). Каждый элемент продукта представляет собой компонент ko с viewmodel.

Почему на кнопку мыши, свойства ненаблюдаемых, являются неопределенными? А также проверьте productTemplate, им доступ к некоторому свойству через продукта и наблюдаемые через $ данных (они не работают иначе - почему?). Спасибо.

Вот пример HTML разметки

<div class="products_wrapper"> 
    <section class="products"> 
     <ul data-bind="foreach: { data: products, as: 'product' }"> 
      <li> 
       <product-item params="product: product"></product-item> 
      </li> 
     </ul> 
    </section> 
</div> 

Вот код компонента:

<script type="text/html" id='productTemplate'> 
<button type="button" name="product" data-bind="attr: { id: product.ProductId }"> 
    <span data-bind='text: product.Name'></span> 
    <span class="product-item-quantity" data-bind='text: $data.Quantity'></span> 
</button></script> 

и вот вид модели и регистрация компонент:

var some = some || {}; 
some.viewmodel = some.viewmodel || {}; 
some.viewmodel.product = function (item) { 
    var self = this; 
    //parameters 
    self.ProductId = item.ProductId; 
    self.Name = item.Name; 
    self.Quantity = ko.observable(0); 

    self.increaseQty = function increaseQty() { 
    self.Quantity(self.Quantity() + 1); 
    }; 
}; 

some.viewmodel.products = function() { 
    var self = this; 

    self.products = ko.observableArray(); 
    self.populate = function (data) { 
    self.products(data); 
    }; 
    self.getData = function() { 
    self.populate(the json data here); 
    }; 
}; 
ko.components.register('product-item', { 
    viewModel: some.viewmodel.product, 
    template: { 
    element: 'productTemplate' 
    } 
}); 

Init здесь:

var products = new some.viewmodel.products(); 
ko.applyBindings(products, $('.products_wrapper')[0]); 
products.getData(); 

$(".products").on('click', 'button', function() { 
    var productcontext = ko.contextFor(this); 
    var product = ko.dataFor(this); 
    product.increaseQty(); 
    //$('.debug').append();//debug here 
}); 

Answer 1

В вашем случае вам нужно вставить product свойства как это:

self.ProductId = item.product.ProductId; 
    self.Name = item.product.Name; 

Нажмите кнопку на: JS Fiddle