title: Knockoutjs Custom bindig with jQueryUI Dialog
body: <p>I'm trying to make a custom binding based on this code,  <a href="http://jsfiddle.net/rniemeyer/WpnTU/" rel="nofollow">http://jsfiddle.net/rniemeyer/WpnTU/</a> ,  Mine after a field checkbox is selected then open a jQueryUI dialog. Here is the code: <a href="http://jsfiddle.net/superjohn_2006/UFEg6/" rel="nofollow">http://jsfiddle.net/superjohn_2006/UFEg6/</a> , another question is it posible to acomplish this without a template.</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody data-bind="foreach: records"&gt;
          &lt;tr data-bind="foreach: fields"&gt;
              &lt;th align="left"&gt;
                  &lt;input type="checkbox" data-bind="checked: chkedValue" /&gt;&lt;span data-bind="    text: field"&gt;&lt;/span&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr data-bind="foreach: fields"&gt;
              &lt;th align="left"&gt;&lt;a data-bind="click: $root.addFormatting" href="#"&gt;Add Formatting&lt;/a&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr data-bind="foreach: row"&gt;
              &lt;td data-bind="text: value"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;div id="details" data-bind="jqDialog: { autoOpen: false, resizable: false, modal: true }, template: { name: 'editTmpl', data: selectedField }, openDialog: selectedField"&gt; 
  &lt;/div&gt;
  
  &lt;script id="editTmpl" type="text/html"&gt;
      &lt;p&gt;
          &lt;label&gt;Selected Field: &lt;/label&gt;
          &lt;span data-bind="value: field"  /&gt;
      &lt;/p&gt;    
      &lt;button data-bind="jqButton: {}, click: $root.accept"&gt;Accept&lt;/button&gt;
      &lt;button data-bind="jqButton: {}, click: $root.cancel"&gt;Cancel&lt;/button&gt;
  &lt;/script&gt;
  
  **The model
  
  // custom binding
      ko.bindingHandlers.jqDialog = {
          init: function(element, valueAccessor) {
              var options = ko.utils.unwrapObservable(valueAccessor()) || {};   // initialize a jQuery UI dialog
              $(element).dialog(options);
  
              // handle disposal
              ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                  $(element).dialog("destroy");
              });
          }
      };
  //custom binding handler that opens/closes the dialog
  ko.bindingHandlers.openDialog = {
      update: function(element, valueAccessor) {
          var value = ko.utils.unwrapObservable(valueAccessor());
          if (value) {
              $(element).dialog("open");
          } else {
              $(element).dialog("close");
          }
      }
  };
  //custom binding to initialize a jQuery UI button
  ko.bindingHandlers.jqButton = {
      init: function(element, valueAccessor) {
          var options = ko.utils.unwrapObservable(valueAccessor()) || {};
  
          //handle disposal
          ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
              $(element).button("destroy");
          }); 
  
          $(element).button(options);  
      }    
  };
  
  var resultsData = [
      { fields: [{ field: "Field1", chkedValue: false }, { field: "Field2", chkedValue: false }] },
      { row: [{ value: "1" }, { value: "True" }] },
      { row: [{ value: "2" }, { value: "False" }] }
  ];
  
  var TableModel = function (records) {
      var self = this;
      self.records = ko.observableArray(ko.utils.arrayMap(records, function (record) {
          return { fields: ko.observableArray(record.fields), row: ko.observableArray(record.row) };
      }));
      self.selectedField = ko.observable();
      self.addFormatting = function (formatToAdd) {
          self.selectedField();
      };
  };
  
  this.accept = function() {
  },
  this.cancel = function() {
  }
  
  ko.applyBindings(new TableModel(resultsData));
  </code></pre>