title: integrating jquery ui dialog with knockoutjs
body: <p>I am trying to create knockoutjs bindings for jquery ui dialogs, and cannot get the dialog to open. The dialog element is created correctly, but seems to have <code>display: none</code> that calling <code>dialog('open')</code> doesn't remove. Also, the call to <code>dialog('isOpen')</code> returns the dialog object rather than a boolean.</p>
  
  <p>I am using the latest knockoutjs and jquery 1.4.4 with jquery ui 1.8.7. I've also tried it with jQuery 1.7.1 with the same results. Here's my HTML:</p>
  
  <pre><code>&lt;h1 class="header" data-bind="text: label"&gt;&lt;/h1&gt;
  
  &lt;div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Dialog test'}"&gt;foo dialog&lt;/div&gt;
  
  &lt;div&gt;
      &lt;button id="openbutton" data-bind="dialogcmd: {id: 'dialog'}" &gt;Open&lt;/button&gt;
      &lt;button id="openbutton" data-bind="dialogcmd: {id: 'dialog', cmd: 'close'}" &gt;Close&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is the javascript:</p>
  
  <pre><code>var jQueryWidget = function(element, valueAccessor, name, constructor) {
      var options = ko.utils.unwrapObservable(valueAccessor());
      var $element = $(element);
      var $widget = $element.data(name) || constructor($element, options);
      $element.data(name, $widget);
  
  };
  
  ko.bindingHandlers.dialog = {
          init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
              jQueryWidget(element, valueAccessor, 'dialog', function($element, options) {
                  console.log("Creating dialog on "  + $element);
                  return $element.dialog(options);
              });
          }        
  };
  
  ko.bindingHandlers.dialogcmd = {
          init: function(element, valueAccessor, allBindingsAccessor, viewModel) {          
              $(element).button().click(function() {
                  var options = ko.utils.unwrapObservable(valueAccessor());
                  var $dialog = $('#' + options.id).data('dialog');
                  var isOpen = $dialog.dialog('isOpen');
                  console.log("Before command dialog is open: " + isOpen);
                  $dialog.dialog(options.cmd || 'open');
                  return false;
              });
          }        
  };
  
  var viewModel = {
      label: ko.observable('dialog test')
  };
  
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p>I have set up a <a href="http://jsfiddle.net/gene/BzKHj/" rel="noreferrer">JSFiddle</a> that reproduces the problem.  </p>
  
  <p>I am wondering if this has something to do with knockoutjs and event handling. I tried returning <code>true</code> from the click handler, but that did not appear to affect anything.</p>