3

我的模型看起来像这样

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"会出现对话框，但缺少输入和按钮。它基本上是一个带有正确标题的空对话框。

如果我更改对data-bind="with: Editing"数据的绑定是否正确绑定到标记，但我会松开对话框。我假设问题出在 的处理程序中jqDialog，但我不确定使这项工作缺少什么。

4

1 回答 1

2

我的猜测是这会起作用（请参阅我在评论中可能的解释）：

<!--ko with: Editing-->
  <div data-bind="jqDialog: $data" data-title="Edit">
    ...
  </div>
<!--/ko-->
于 2012-12-13T02:14:36.450 回答