Question

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

当我最初对样本数据应用绑定时，所有三个区域 - 表单，两个实时预览区域都会加载样本数据

<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>

但是我只需要加载两个预览来加载样本数据，而不是表单元素。在初始绑定期间，当用户点击表单元素的第一个名称时，元素应该为空，无论用户输入的类型是什么，都应绑定到两个预览替换已加载的样本数据。

我正在尝试

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

但我无法连接那些，如何连接用户输入以反映两个预览？

然而，当我使用

时

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

淘汰多视图模型

1 个答案: