Knockoutjs中组件之间的两种方式绑定

Question

我想创建可重用的组件，如果没有外部库（例如我见过的邮箱 sub/pub，我无法创建我需要的双向绑定。

这是我正在尝试做的事情的示例codepen

这是一个非常基本的示例，但它显示了我的需要。

mainViewModel 有一个属性 name，我需要从 name-input 组件中获取它。

我习惯了angular 2+和使用双向绑定，KO有类似的东西吗？

谢谢

史蒂夫

编辑： Javascript:

ko.components.register("name-input", {
  viewModel: function(params) {
    var self = this;
    self.userInput = ko.observable();
    return self;
  },
  template: "<div><input data-bind='textInput: userInput' placeholder='Enter your name'><br/>Hello,<span data-bind='text:userInput'></span></div>"
});


function mainViewModel() {
  var self = this;

  self.name = ko.observable();
}

ko.applyBindings(new mainViewModel(), $("#main")[0]);

Html:

<body>
  <div id="main">
    <div id="inner-container">
      MyName:
      <div data-bind="text:name"></div>
    </div>
    <name-input></name-input>
  </div>
</body>

Answer 1

您可以使用 params 属性为要读取和写入的组件实例传递可观察引用：

<name-input params="value: name"></name-input>

在组件的 viewmodel 函数中，您引用此值而不是创建新的可观察对象：

function(params) {
  var self = this;
  self.userInput = params.value;
  return self;
}

Running example in a fork of your Codepen

Knockoutjs中组件之间的两种方式绑定

Two way binding between components in Knockoutjs

knockout.js

knockout-3.0