如何讓Knockout對話框更新

Question

我得到了這個對話框彈出窗口，我想用選定的文本進行更新。

<div data-bind="with: SelectedText"> 
    <div id="dialog" data-bind="dialog: {'autoOpen': false, 'title': textbatchTitle }, dialogVisible: $root.isMetadataDialogOpen"> 
     <div class="metadata"> 
      <label for="textbatchTitle">Title:</label> <span class="rotten">Why isen´t this updated with SelectText after pushing "Add New Text"?"</span> 
      <input type="text" name="textbatchTitle" data-bind="value: textbatchTitle, valueUpdate: 'afterkeydown'" /> 
     </div> 
    </div> 
</div> 

看起來對話框沒有迴應「with」 - 綁定？

這是我自定義綁定：

ko.bindingHandlers.dialog = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var options = ko.utils.unwrapObservable(valueAccessor()) || {}; 

     //do in a setTimeout, so the applyBindings doesn't bind twice from element being copied and moved to bottom 
     setTimeout(function() { 
      options.close = function() { 
       allBindingsAccessor().dialogVisible(false); 
      }; 

      $(element).dialog(ko.toJS(options)); 
     }, 0); 

     //handle disposal (not strictly necessary in this scenario) 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).dialog("destroy"); 
     }); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible), 
      $el = $(element), 
      dialog = $el.data("uiDialog") || $el.data("dialog"), 
      options = valueAccessor(); 

     //don't call dialog methods before initilization 
     if (dialog) { 
      $el.dialog(shouldBeOpen ? "open" : "close"); 

      for (var key in options) { 
       if (ko.isObservable(options[key])) { 
        $el.dialog("option", key, options[key]()); 
       } 
      } 
     } 
    } 
}; 

有什麼不對呢？ http://jsfiddle.net/qFjRW/

Answer 1

你不包括jQuery UI的作爲外部來源：

Uncaught TypeError: Object [object Object] has no method 'dialog' 

見http://jsfiddle.net/FXTHn

編輯：

由於您使用的with: SelectedText之外對話當SelectedText更改時，它不會呼叫update。嘗試將它放在裏面：

<div id="dialog" data-bind="dialog: {'autoOpen': false, 'title': SelectedText().textbatchTitle }, dialogVisible: $root.isMetadataDialogOpen"> 
    <div data-bind="with: SelectedText"> 
     <div class="metadata"> 
      <label for="textbatchTitle">Title:</label> <span class="rotten">Why isen´t this updated with SelectText after pushing "Add New Text"?"</span> 
      <input type="text" name="textbatchTitle" data-bind="value: textbatchTitle, valueUpdate: 'afterkeydown'" /> 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/FXTHn/1/