了解嵌套组件绑定如何在 KnockoutJS 上工作

Question

我正在尝试使用淘汰组件，我正在尝试使用的一件事是嵌套组件，如下所示：

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

parentText 和 childText 都是同一个视图模型对象的成员，但是当我运行这样做时，我得到以下错误：

未捕获的 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>

任何人都可以向我解释我做错了什么吗？

谢谢，

Answer 1

你做得很好。不过，我在这里看到了 2 个问题。

第一个：

$componentTemplateNodes 在这种情况下看不到，因为您使用的是 knockout 3.2，其中尚不支持，所以您最好将您的库更新到较新的库，knockout 3.4 已经出来了，但是 $componentTemplateNodes 支持从 3.3 开始。

第二个：

在您的 ChildComponent 虚拟机中，您引用了参数 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 虚拟机应该是：

self.childText = params.childText;

了解嵌套组件绑定如何在 KnockoutJS 上工作

Understanding how nested components binding works on KnockoutJS

javascript

knockout.js

knockout-3.0