Question

我试图使用淘汰组件，而我试图使用的一件事是这样的嵌套组件：

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

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

未捕获的ReferenceError：无法处理绑定＆＃34; template：function（）{return {nodes：$ componentTemplateNodes}}＆＃34; 消息：未定义childText

这是我尝试运行的示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

谢谢，

Answer 1

你做得好。我可以在这看到2个问题。

<强>首先

在这种情况下没有看到

$componentTemplateNodes，因为您使用的是淘汰赛3.2还没有支持，所以你最好将你的lib更新到新版本，淘汰赛3.4已经出局但是$componentTemplateNodes支持从3.3开始。

<强>第二

在您的ChildComponent vm中，您引用了参数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;

了解嵌套组件绑定如何在KnockoutJS上运行

1 个答案: