KnockoutJs 「與」和自定義bindingHandlers

我的模型看起來像這樣KnockoutJs 「與」和自定義bindingHandlers

var model function(json) { 
    var self = this; 

    self.Editing = ko.observable(); 
    self.Edit = function(item) { 
     item.beginEdit(); 
     self.Editing(item); 
    } 
    self.Save = function(item) { 
     item().commit(); 
     self.Editing(null); 
    } 
    self.Cancel = function(item) { 
     item().rollback(); 
     self.Editing(null); 
    } 

    ko.mapping.fromJS(json, {}, this); 
}

我也有jQuery的UI一些自定義綁定

ko.bindingHandlers.jqDialog = { 
init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    var options = $.extend(
      {}, 
      allBindingsAccessor().dialogOptions, 
      { autoOpen: false, modal: true, width: 'auto' }); 

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
     $(element).dialog("destroy"); 
    }); 

    $(element) 
     .dialog(options) 
     .children('form:first') 
     .ajaxForm({ configure ajax call }); 
}, 
update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    var value = ko.utils.unwrapObservable(valueAccessor()); 
    if (value === null) { 
     $(element).dialog('close'); 
    } 
    else { 
     var title = $(element).data('title') + ' - ' + value.Title; 
     $(element).dialog('option', 'title', title).dialog('open'); 
    } 
} 
};

，最後我的模板

...standard binding that works... 
...foreach template binding that works... 
<div data-bind="with: Editing, jqDialog: Editing" data-title="Edit"> 
    <form method="put" action="/api/Item" data-bind="submit: $parent.Save"> 
    <input type="hidden" name="Id" data-bind="value: Id" /> 
    <div> 
     <label>Enter the Value</label> 
     <input name="thevalue" data-bind="value: thevalue" /> 
    </div> 
    <input type="submit" value="Save" data-bind="jqButton: {}" /> 
    <a href="#" data-bind="click: $parent.Cancel, jqButton: {}">Cancel</a> 
    </form> 
</div>

問題：使用綁定data-bind="with: Editing, jqDialog: Editing" dialo g盒子將出現，但輸入和按鈕丟失。它基本上是一個帶有正確標題的空對話框。

如果我將綁定更改爲data-bind="with: Editing"數據已正確綁定到標記，但我鬆開了對話框。我假設問題出在jqDialog的處理程序中，但我不確定缺少什麼工作。

來源

2012-12-12 Jason Meckley

的'with'結合節省的元素含量的副本，然後將其清除。我猜jQuery對話框做了類似的事情。因此，對話框會被創建爲空內容。即使'with'綁定稍後將內容放回，對話框代碼也會將其替換爲空的內容。 –

我的猜測是，這將工作（見註釋我可能的解釋）：

<!--ko with: Editing--> 
    <div data-bind="jqDialog: $data" data-title="Edit"> 
    ... 
    </div> 
<!--/ko-->

來源

2012-12-13 02:14:36

是的！當然這是有道理的，我現在看到它:) –

KnockoutJs 「與」 和自定義bindingHandlers

回答

相關問題

KnockoutJs 「與」和自定義bindingHandlers