javascript - knockout 多 View 模型

Question

我有一个页面，其中通过表单元素有一个可编辑 View ，它们是按下按键时可观察的，该 View 连接到同一页面上的两个实时预览。

当我最初应用示例数据的绑定(bind)时，所有三个区域 - 表单、两个实时预览区域都会加载示例数据

<div id="create">
<!--Contains form elements-->
<form>
<!--Data Should not load during inital page load, empty textboxes should be shown to user. When user clicks on this text box, This values should be connected to two previews, replacing the sample data already binded
--> <input type="text" data-bind="value: jw_fullname, valueUpdate: 'afterkeydown'" placeholder="Full Name" id="jw_fullname" />
</form>
</div>
<div id="preview1">
Template One
<h1 id="title" data-bind="text: jw_fullname">
Sample data loaded here during page load
</h1>
</div>

<div id="preview2">
Template two
<p data-bind="text: jw_fullname"></p>
Sample data loaded here during page load
</div>

但是我只需要两个预览来加载示例数据，而不是表单元素，这些元素在初始绑定(bind)期间应该为空，当用户单击表单元素的名字时，用户输入的任何内容都应该绑定(bind)到两个预览预览正在替换已加载的示例数据。

我正在尝试

  ko.applyBindings(my.vm.sample, document.getElementById('preview1'));
    ko.applyBindings(my.vm.sample, document.getElementById('preview2'));
    ko.applyBindings(my.vm.emptydataset, document.getElementById('create'));

但我无法连接这些，如何连接用户输入以反射(reflect)在两个预览中？

但是当我只是使用

ko.applyBindings(my.vm)

这三者彼此同步，工作正常。但我不希望用户删除表单上的示例数据。

Answer 1

您可以使用 custom binding 来实现此目的

HTML:

<input type="text" data-bind="value: jw_fullname, valueUpdate: 'afterkeydown', emptyInit: emptyInit" placeholder="Full Name" id="jw_fullname" />

Javascript:

ko.bindingHandlers.emptyInit = {
    init: function(element, valueAccessor, allBindingsAccessor, 
                   viewModel, bindingContext) 
    {
        element.value = '';
    }
}

var ViewModel = function() {
    this.jw_fullname = ko.observable("A");
    this.emptyInit = ko.observable(true);
};


ko.applyBindings(new ViewModel());

还有fiddle其中