在模板中敲除jQuery UI小部件綁定

當使用jquery-ui custom bindings將日期選擇器添加到文本字段時，它僅在不使用模板時更新我的模型。在模板中敲除jQuery UI小部件綁定

HTML：

<script type="text/html" id="datepicker-template"> 
     <span data-bind="text: $data"></span> 
     <input type="text" data-bind="jqueryui: {widget:'datepicker'}, value: $data"> 
</script> 

<h2>Witout templates</h2> 
<div> 
    <span data-bind="text: from"></span> 
    <input type="text" data-bind="jqueryui: {widget:'datepicker'}, value: from"> 
    <span data-bind="text: to"></span> 
    <input type="text" data-bind="jqueryui: {widget:'datepicker'}, value: to"> 
</div> 
<h2>With template<h2> 
<div data-bind="template: {name:'datepicker-template', foreach: dates}"></div>

的JavaScript：

$(function(){ 
    var ViewModel = function(){ 
     this.from = ko.observable("from"); 
     this.to = ko.observable("to"); 
     this.dates = ko.observableArray([this.from, this.to]); 
    }; 

    var viewModel = new ViewModel();    
    ko.applyBindings(viewModel); 
});

覺得我失去了一些東西很簡單。

來源

2012-05-28 Tom

請在此處添加您的相關代碼，無實際問題的外部鏈接 –

實際上，問題在沒有jQueryUI綁定的簡單示例中是可重現的。問題與淘汰賽模板中的$data關鍵字有關。

顯然$data不能用於模板內部的雙向綁定。見this Google Groups thread for some commentary：

如果你有一個項目：「一」，「二」，「三」或甚 [ko.observable（「1」），ko.observable（「二」），KO .observable（「three」）] 在foreach $數據中將是原始值並且KO沒有辦法在指向知道如何回寫它。在需要讀寫值的情況下，需要使用屬性爲的對象。

因此，要解決這個限制的一種方式是創建一個簡單的視圖模型爲你的約會對象：

var DateViewModel = function (initialValue) { 
    this.value = ko.observable(initialValue); 
};

，然後在主視圖模型，你可以寫：

var ViewModel = function() { 
    this.dates = ko.observableArray([ 
     new DateViewModel("from"), 
     new DateViewModel("to") 
    ]); 
};

而且你的模板最終會是這樣的：

<script type="text/html" id="datepicker-template"> 
    <span data-bind="text: value"></span> 
    <input type="text" data-bind="value: value"> 
</script>

示例：http://jsfiddle.net/RjEnh/

來源

2012-05-28 13:53:22

在模板中敲除jQuery UI小部件綁定

回答

相關問題