Понимание того, как вложенные компоненты связывания работ по KnockoutJS

Question

Я пытаюсь использовать компоненты нокаута, и одна вещь, которую я пытаюсь использовать это вложенные компоненты, как это:

<parent-component params="parentText: parentText"> 
    <child-component params="childText: childText"></child-component> 
    </parent-component> 

parentText и childText являются оба члена тот же объект модели представления, но когда я запустил это, я получаю следующую ошибку:

Uncaught ReferenceError: не удалось обработать привязку "template: function() {return {nodes: $ componentTemplateNodes}}" Сообщение: childText не определен

Это пример, который я пытаюсь запустить:

var ParentComponent = function(params) { 
 
    var self = this; 
 
    self.parentText = params.parentText; 
 
}; 
 

 
ko.components.register('parent-component', { 
 
    viewModel: ParentComponent, 
 
    template: '<div><p><strong data-bind="text: parentText"></strong></p><!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko --></div>' 
 
}) 
 

 
var ChildComponent = function(params) { 
 
    var self = this; 
 
    self.childText = params.text2; 
 
}; 
 

 
ko.components.register('child-component', { 
 
    viewModel: ChildComponent, 
 
    template: '<p data-bind="text: childText"></p>' 
 
}) 
 

 
var ViewModel = function() { 
 
    var self = this; 
 
    self.title = 'KnockoutJS component test'; 
 
    self.parentText = 'This is the text1'; 
 
    self.childText = 'This is the text2'; 
 
}; 
 

 
ko.applyBindings(new ViewModel(), document.getElementById('content'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div id="content"> 
 
    <h1 data-bind="text: title"></h1> 
 
    <parent-component params="parentText: parentText"> 
 
    <child-component params="childText: childText"></child-component> 
 
    </parent-component> 
 
</div>

Может кто-нибудь, пожалуйста, объясните мне, что я делаю неправильно?

Thanks,

Answer 1

Ваше добро. Я вижу здесь 2 проблемы.

Первое:

$componentTemplateNodes не рассматривается в данном случае, потому что вы используете Нокаут 3.2, в которой это не поддерживается еще, так что вам лучше обновить свою библиотеку на более новый, нокаут 3,4 уже вышел, но $componentTemplateNodes Поддержка начинается с версии 3.3.

Второе:

В вашем ChildComponent виртуальной машине вы упомянули Params text2

self.childText = params.text2;

Но когда вы объявили его в HTML-привязки, это имена, как childText.

<child-component params="childText: childText"></child-component>

А также принять к сведению, что <child-component params="childText: childText"></child-component> заключена во внутреннем компоненте так childText нельзя увидеть здесь, так что вам следует обратиться как $root.childText.

Подводя итог: Связывание должно быть.

<parent-component params="parentText: parentText"> <child-component params="childText: $root.childText"></child-component> </parent-component>

И ChildComponent VM должно быть:

self.childText = params.childText;