Question

my model looks like this

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);
}

I also have some custom bindings for 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');
    }
}
};

and finally my template

...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>

The problem: using the bindings data-bind="with: Editing, jqDialog: Editing" the dialog box will appear but the inputs and buttons are missing. it’s basically an empty dialog box with the proper title.

if I changes the bindings to data-bind="with: Editing" the data is properly bound to the markup, but I loose the dialog. I’m assuming the problem is in the handler for jqDialog, but I’m not sure what is missing to make this work.

Answer 1

My guess is that this will work (see my possible explanation in the comments):

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