淘汰多个查看模型

我有一个页面，我有一个可编辑视图通过表单元素，他们是在关键时刻观察，视图连接到同一页上的两个实时预览。淘汰多个查看模型

当我最初与样本数据应用绑定，这三个领域 - 的形式，二实时预览区得到加载了样本数据

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

这三种方法都在彼此同步，他们工作的权利。但我不希望用户删除表单上的示例数据。

来源

2014-01-11 Jagan K

一个短nswer：使用一个视图模型并将其绑定到一个根对象（否则，尽管存在一些更高级的用例，您最终只能与KO对抗）。如果某些元素不应显示，请使用适用的绑定来隐藏（或不创建）元素。 – user2864740

应该显示表单元素，但我不想仅在初始绑定时加载值 –

然后先将它绑定到一些“空白”模型数据/可观察对象。您可以直接更新绑定的observables，也可以使用可观察的数据进行绑定（因此可以一次替换整个子模型）。我建议查看KO自定义绑定文档中显示的'withProperties'绑定。 – user2864740

可以使用实现这一custom binding

HTML：

的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

来源

2014-01-11 12:33:37

此解决方案非常简单。但是其中一个form元素是一个文本区域，它已经为它的wysiwyg编辑器使用了一个自定义绑定处理程序。如果我使用emptyInit与文本区域，我得到参考错误：emptyInit未定义。 –

https://gist.github.com/jpo/5540893在上面的要点 –

上可以找到文本区域的自定义绑定Cleditor，您需要修改自定义绑定以在init –

淘汰多个查看模型

回答

相关问题