javascript - 将 knockout 模板绑定(bind)到自定义组件后如何更改 View 模型的数据

Question

我有一个静态模板绑定(bind)到 KnockoutJS 中的自定义组件。 ViewModel 数据已初始化并且工作正常(在输出中获取 John Smith)。

$(document).ready(function() {
  var viewModel = function() {
    this.name = ko.observable('John Smith');
  }
  var viewModelObject = new viewModel();

  ko.components.register('my-component', {
    viewModel: viewModel,
    template: 'Name: <input data-bind="value: name" /> '
  });

  viewModelObject.name('Smith John');
  ko.applyBindings(viewModelObject);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
  <my-component></my-component>
</div>

JSFiddle:http://jsfiddle.net/17cmjptL/1/

在这里，我试图更改 ViewModel 中的值。我知道可以将 viewModelObject 传递给 ko.applyBindings 方法。但刚刚尝试过。

任何人都可以帮忙，如何更改 View 模型数据而不重新绑定(bind)。 ？

即。我想要得到 Smith John 的输出。

Answer 1

我认为您误解了组件的用途。组件是一种获取具有自己内部行为的自定义元素的方法。您可以通过组件的参数与组件交互，而不是直接控制组件 View 模型。

首先，让我们看看您的代码发生了什么。您为组件 View 模型正确创建了构造函数，并将其注册到组件。每次实例化组件时都会运行此函数:每个组件都会获得自己的该对象的实例。

然后，您构建自己的 View 模型实例，设置其名称并绑定(bind)它。 Knockout 会创建组件的实例，因为存在自定义元素，但其上没有参数。您的构造函数将运行，获取默认名称，并将其绑定(bind)到输入。您调用 applyBindings 的 View 模型不用于任何用途，因为该组件有自己的 View 模型实例。

您想要做的是创建一个 View 模型，通过参数将名称传递给您的组件。然后你可以控制这个 View 模型，这反过来会影响你的组件。它可能看起来像这样

var componentVm = function (params) {
    this.name = params.name;
}

ko.components.register('my-component', {
    viewModel: componentVm,
    template: 'Name: <input data-bind="value: name" /> '
});

var vm = {
    name: ko.observable("John Smith"),
    updateName: function() {
         this.name("Smith John");   
    }
};
ko.applyBindings(vm);

<div>
    <my-component params="name: name"></my-component>
    <button data-bind="click: updateName">Update</button>
</div>

这是一个fiddle you can play with .