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

私はまだ成功していません。誰が私が間違っているのか教えてもらえますか?