獲取模板內$數據的雙向綁定

我正在嘗試設置通用Knockout模板，可以根據數據類型在編輯和只讀模式之間進行切換。如果您曾經使用過ASP.NET的動態數據，那就好比他們的字段模板。例如：

<script type="text/html" id="text"> 
    <!-- ko if: $root.editable --> 
     <input type="text" data-bind="value: $data" /> 
    <!-- /ko --> 

    <!-- ko ifnot: $root.editable --> 
     <span data-bind="text: $data"></span> 
    <!-- /ko --> 
</script>

這是使用這樣的：

<label><input type="checkbox" data-bind="checked: editable" /> Editable</label> 

<p>Name: <input data-bind="value: name" /></p> 
<p>Name2: <span data-bind="template: { name: 'text', data: name }"></span></p>

用下面的視圖模型：

var viewModel = { 
     name: ko.observable("Brian"), 
     editable: ko.observable(true) 
    };

的想法是能夠在外地一級喜歡使用模板在「Name2」示例中，而不是顯式元素/控件。這允許整個表單在編輯和讀取模式之間輕鬆切換，而不需要大部分重複標記的大部分。這還允許公共數據類型的編輯/顯示標記的重複使用，例如使用datepickers日期字段等

的問題
模板內的$data僞變量沒有雙向綁定。它將反映可觀察值中的當前值，但輸入控件中的更改不會設置該值。

如何在$data上獲得雙向綁定？

參見this jsfiddle

來源

2012-01-24 Brian Pritchard

最簡單的選擇是傳遞一個對象到模板結合，可以讓你訪問實際觀察到的一樣：

template: { name: 'text', data: {field: name} }

隨後，針對「場」的綁定，而不是「 $ data「。

另一個要考慮的將使用一個函數來確定您的模板，那麼你可以使用不同的模板編輯/查看，如：
http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html

來源

2012-01-24 15:59:14

謝謝！你是瑞安的男人！ –

有一個問題，或許任何人知道爲什麼當我使用'$ data'和'$ item'關鍵字時 - 模板不會被渲染，但是當訪問由ViewModel字段名稱在'foreach'中傳遞的元素時 - 一切正常，比如我綁定viewModel與用戶數組（具有單個'name'字段），然後綁定到'name'在模板中工作，但是當使用'$ data'或'$ item'時 - 無法使其工作。例如''不起作用，但''span data-bind =「text：name」>'很好，所以我無法訪問'$ root， $ item，$ data'有什麼可能導致這樣的問題？謝謝 – sll

也許你可以在jsFiddle中創建你的問題？「$ item」僅在jQuery模板中可用。如果'$ data'是一個對象，那麼你不想將它傳遞給文本綁定，那麼你會想要做'text：name'或者'text：$ data.name'（第二種語法對未定義有幫助）。 –

獲取模板內$數據的雙向綁定

回答

相關問題