Question

我与knockoutjs有点相似这是问题的fiddle 我在那里添加了一些简化的逻辑不久，我有一个产品清单，我应该从服务器填充它，点击产品项目我需要产品数据（带有可观察数据），所以我可以更新其他视图模型。
请注意，并非所有属性都是可观察的（产品名称等，不会更改）。每个产品项都是一个带有viewmodel的ko组件。

为什么按钮点击，不可观察的属性未定义？另外，检查 productTemplate ，我通过产品访问某些属性，通过 $ data 访问observables（他们不这样做 - 为什么？）。感谢。

以下是示例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'
  }
});

初始于此：

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

上的按钮

knockoutjs自定义元素（组件），viewmodel属性undefined

1 个答案: