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 に答える