javascript - 如何为 jquery ui 对话框创建自定义绑定？

Question

我正在尝试创建一个custom binding for jquery-ui dialog. 我创建了一个按钮，我们可以通过它打开一个对话框。

JSFIDDLE

HTML

<button data-bind="click: openDialog(true)">Open</button>

  <div data-bind="value: $root.openDialog, dialog: { autoOpen: false, 
                  resizable: false, draggable: false, 
                  dialogClass: 'differentDialog searchoption', modal: false }">
    <p>This is a dialog</p>
  </div>

JS

function VM(){
  this.openDialog = ko.observable(false);
}
ko.bindingHandlers.dialog = {
    init: function (element, valueAccessor, allBindingAccessor, viewModel, bindingContext) {
        var options = ko.utils.unwrapObservable(valueAccessor() || {});

        $(element).dialog(options);
        alert('init');
    },
    update: function (element, valueAccessor, allBindingAccessor, viewModel, bindingContext) {
        alert('update');
        var options = ko.utils.unwrapObservable(valueAccessor() || {});

      if(viewModel.openDialog()){

        viewModel.openDialog(false);

        viewModel.openDialog.isModified(false);


        $(element).dialog("open");
      }
    }
};

ko.applyBindings(new VM());

我还没有成功。谁能告诉我我做错了什么？