KnockoutJs和自定义bindingHandlers

Question

我的模特长得像这样

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的处理程序中，但我不确定要使它工作缺少什么。

Answer 1

我的猜测是，这是可行的(见我在评论中的可能解释)：

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