敲除J中的组件之间的两种绑定

我希望创建可重复使用的组件，我只是无法创建我所需的两种绑定，而没有外部库，例如我见过的邮箱子/酒吧。

这是我想做的

的示例编号。

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

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

我习惯于与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>

您可以使用 params属性传递可观察的参考，以读取组件实例，以读取并写入：

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

在组件的ViewModel函数中，您可以参考此值，而不是创建一个新的观察值：

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

在您的codepen的叉子中运行示例

相关内容

最新更新

热门标签：