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

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

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

还有我可以在javascript中使用的任何调试器，它允许我查看对象值，以便我可以自己查看这些内容。

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

ko.bindingHandlers.attr.update

当它试图打开可观察物时。所以至少我知道绑定是从模型到视图。我将不得不尝试使用init或其他东西充实veiwModel，因为它显然不在绑定上下文中;或者手动设置绑定。感谢您的回复，我担心我可能会对这种不正确的组件创建方法感到困惑，因为它看起来非常简单和整洁。 ps我已经尝试过self，observable，non observable，bind（this / self）只使用vm中的一个值，并且几乎只有一个veiwmodel值的$ data $ components的所有可能组合

Answer 1

很难理解你想要实现的目标，但我可以看到你的组件实现存在一些问题。

self.productName = ko.observable(params.productname); - 它应为self.productName = params.productname;，因为您提供的Product应为Observable。在您的AppModel中，您应该将其定义为self.Product = ko.observable();
self.collectedCases = ko.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.

从viewmodel到模板的组件绑定

1 个答案: