淘汰多個查看模型

我有一個頁面，我有一個可編輯視圖通過表單元素，他們是在關鍵時刻觀察，視圖連接到同一頁上的兩個實時預覽。淘汰多個查看模型

當我最初與樣本數據應用綁定，這三個領域 - 的形式，二實時預覽區得到加載了樣本數據

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

淘汰多個查看模型

回答

相關問題