KnockoutJS - 可以为 SPA 使用父/子视图模型吗？答案

【问题标题】：KnockoutJS - possible to use parent / child view models for SPA?KnockoutJS - 可以为 SPA 使用父/子视图模型吗？
【发布时间】：2016-03-03 07:58:21
【问题描述】：

我需要知道 KnockoutJS 是否可以支持这样的应用程序结构，即有一个主容器 div 已与 applyBindings 绑定到某个视图模型，然后在该 div 内部有一个子 div，它有自己的视图模型，但他们能够相互交流吗？

 <div id="main">
   <div id="child">

   </div>
 </div>

然后

ko.applyBindings(pageViewModel, document.getElementById('main'));
ko.applyBindings(childViewModel, document.getElementById('child'));

但是“child”中的某些元素能够调用 pageViewModel 上存在的函数而不是 childViewModel？我觉得如果没有这个功能，Knockout 可能不支持完整的水疗设置。这实际上在某种程度上是可能的吗？

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

ko.components.register('message-editor', {
  viewModel: function(params) {
    this.clickFn = params.clickFunction
  },
  template: '<button data-bind="click:clickFn">Click</button>'
});

vm = {
  fn: function() {
    console.debug("Doing something in the parent");
  },
  fn2: function() {
    console.debug("Also something in the parent");
  }
};
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h4>First instance, without parameters</h4>
<div data-bind='component: {
                name: "message-editor",
                params: {clickFunction: fn}
                }'></div>

<h4>Second instance, passing parameters</h4>
<div data-bind='component: {
    name: "message-editor",
    params: { clickFunction: fn2 }
}'></div>

是的，您正在寻找components。主视图模型可以引入任意数量的组件并为它们的视图模型传递值，包括在主视图模型上操作的可观察对象或函数。

【讨论】：

我以前没有以这种方式使用过组件，所以我正在寻找一个能够“传递可以在主视图模型上操作的函数”的示例
@mls3590712 我添加了一个简单的例子。