从视图模型到模板的组件绑定

Question

我在使用组件时遇到问题：模板似乎没有绑定到 ViewModel 中的值。

这是行动开始的地方

<div data-bind="foreach: orderItem">
  <item-widget params="productname: Product,
                       casetopallet: CaseToPallet,
                       requiredcases: RequiredCases,
                      "></item-widget>
</div>


<div class="OrderItem"> 
<input class="locknumin" type="number" data-bind="attr: {value: collectedCases}"></input>
<input class="locknumin" type="number" data-bind="attr: {value: requiredCases}"></input>
<input class="locknumin" type="number" data-bind="attr: {value: collectedPallets}"></input>
<input class="locknumin" type="number" data-bind="attr: {value: requiredPallets}"></input>
<input type="text" data-bind="attr: {value: $component.productName}"></input>
</div>

当 params 键 == 属性绑定时，一切都显示正常，除非我尝试使用一个不会显示自身而其余部分会显示的可计算对象。

function OrderItemVeiwModel(params) {
    var self = this;
    self.productName = ko.observable(params.productname);
    self.caseToPallet = ko.observable(params.casetopallet);
    self.requiredCases = ko.observable(params.requiredcases);
    self.collectedCases = ko.computed();
    self.collectedPallets = ko.observable();
    self.requiredPallets = ko.observable(function(){return this.collectedCases / this.casetoPallet;})
}; 
ko.components.register('item-widget', {veiwModel: OrderItemVeiwModel, template:{element: OrderItemTemplate}});

但是永远不会显示计算值。为查看发生了什么，我更改了所有参数键，以便 ViewModel 可以访问它们但不能访问模板，并且不显示任何内容。

问题是：我应该期望视图在此处绑定到 veiwModel 数据，还是必须以其他方式创建组件？还是我犯了一个简单的错误？

还有任何我可以在 javascript 中使用的调试器，它们可以让我查看对象值，以便我自己查看这些东西。

==================================编辑========== ============================== 我查看了 knockout 和 chromium dev utils 的调试版本（比 fireFoxes 好得多）错误发生在

ko.bindingHandlers.attr.update

当它试图打开可观察对象时。所以至少我知道绑定是从模型到视图的。我将不得不尝试用 init 或其他东西充实 veiwModel，因为它显然不在绑定上下文中；或者 perhaps 手动设置绑定。感谢您的回复恐怕我可能有点坚持这种错误的组件创建方法，因为它看起来非常简单和整洁。 ps 我已经尝试过 self, observable, non observable, bind(this/self) 在虚拟机中只使用一个值，并且几乎所有可能的 $data $ 组件组合都只在一个 veiwmodel 值上

Answer 1

很难理解你想要实现什么，但我可以看到你的组件实现有一些问题。

self.productName = ko.observable(params.productname); - 它应该是 self.productName = params.productname; 因为你提供的 Product 应该是一个 Observable。在您的 AppModel 中，您应该将其定义为 self.Product = ko.observable();
self.collectedCases = ko.computed(); - 没有提供计算结果的函数的 Computed 是没有意义的。它应该总是类似于 self.collectedCases = ko.computed(function () { return ...; });
self.requiredPallets = ko.observable(function(){return ...;}) - 应该是 ko.computed(...)，而不是 ko.observable(...)，请参阅我的第二点。
function(){return this.collectedCases / this.casetoPallet;} - 你应该在这里使用 self. 而不是 this.

从视图模型到模板的组件绑定

Component binding from viewmodel to template

javascript

components

knockout.js