компонент связывания с ViewModel к шаблону

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> 

Когда ключ Титулы == атрибут всех привязок показывается нормально, за исключением того, когда я пытаюсь использовать вычислимый, который не будет отображаться себя в то время как остальные будут.

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 мог обращаться к ним, но не к шаблону, и ничего не отображается.

Вопрос: должен ли я ожидать, что представление связывается с данными wiwModel здесь, или мне нужно создать компонент другим способом? Или есть простая ошибка, которую я сделал?

Также есть какие-либо отладчики, которые я могу использовать в javascript, которые позволят мне заглядывать в значения объекта, чтобы я мог самостоятельно изучить эти вещи.

======================== ======================================================================================================================================== ============================= я поглядела с отладочной версии выколотки и хрома Дев утилитами (гораздо лучше, чем fireFoxes) ошибка возникает в

ko.bindingHandlers.attr.update 

, когда он пытается развернуть наблюдаемые. Так что, по крайней мере, я знаю, что привязка от модели к веной. Мне нужно будет попытаться объединить veiwModel с init или что-то, поскольку оно явно не в контексте привязки, как есть; или, возможно, настроить привязки вручную. Спасибо за ответ. Я боюсь, что могу немного застрять на этом неправильном методе создания компонентов, потому что он выглядит довольно простым и аккуратным. ps Я пробовал себя, наблюдаемый, не наблюдаемый, bind (this/self), используя только одно значение в vm и почти все возможные комбинации $ data $ -компонентов только для одного значения вейвмодели

Answer 1

Это трудно понять что вы хотите достичь, но я вижу, что ваша реализация компонента имеет некоторые проблемы.

1. self.productName = ko.observable(params.productname); - Это должно быть self.productName = params.productname;, потому что Product вы поставляете должны быть наблюдаемы. В вас AppModel вы должны определить его как self.Product = ko.observable();

2. self.collectedCases = ko.computed(); - a Вычисленный без функции, которая поставляет вычисленный результат, не имеет смысла. Оно всегда должно быть что-то вроде self.collectedCases = ko.computed(function() { return ...; });

3. self.requiredPallets = ko.observable(function(){return ...;}) - должно быть ko.computed(...), не ko.observable(...), увидеть мою 2-ю.

4. function(){return this.collectedCases/this.casetoPallet;} - вы должны использовать self. здесь вместо this.