javascript - knockoutjs 自定义元素(组件)，viewmodel 属性未定义

Question

我对knockoutjs 有点卡住了。
这是fiddle对于这个问题。
我在那里添加了一些简化的逻辑。
很快，我就有了一个产品列表，我应该从服务器填充它，单击产品项后，我需要产品数据(带有可观察值)，以便我可以更新其他 View 模型。
请注意，并非所有属性都是可观察的(产品名称等不会改变)。每个产品项都是一个带有 viewmodel 的 ko 组件。

为什么点击按钮时，不可观察量的属性未定义？另外，检查productTemplate，我通过product访问一些属性，并通过$data访问可观察值(否则它们不起作用 - 为什么？) 。谢谢。

这是示例 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> 

这里是 View 模型和组件注册:

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'
  }
});

在这里初始化:

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