title: Binding issues with knockout and jQuery Mobile
body: <p><strong>UPDATE</strong>: The third bullet below ("so I tried the following" section) is the closest I have come to a fix. I <em>think</em> I basically need to 1) disable the button, 2) add ui-disable, 3) jqm refresh, all within the data-bind or model.</p>
  
  <p>I am trying to get one of the knockout <a href="http://knockoutjs.com/examples/gridEditor.html" rel="nofollow">demos</a> to run with jqm in order to build something similar in my project. It mostly works except that the submit button <strike>does not disable</strike> goes disabled but does not appear grayed out if items = 0.</p>
  
  <p>If you remove jqm, the example works fine and the button turns gray. I realize that jqm can conflict with knockout due to dom manipulation so I tried the following:</p>
  
  <ul>
  <li>Triggering style refresh in the model methods: <code>$('button').button();</code> or <code>$('.ui-page-active' ).page( 'destroy' ).page();</code></li>
  <li>Starting the binding after <code>pageinit</code>. This broke the entire thing.</li>
  <li><p>As a test, I tried a data-bind to set ui-disable instead of disabling the button. It applies the class but jqm needs a refresh somehow. Can I put code into the data-bind to do the refresh?</p>
  
  <p><code>&lt;button data-bind="css: {'ui-disable': gifts().length &gt; 0}" type='submit'&gt;Submit&lt;/button&gt;</code></p></li>
  </ul>
  
  <p>Here is the fiddle I have been using to troubleshoot this: <a href="http://jsfiddle.net/wtjones/wkEgn/" rel="nofollow">http://jsfiddle.net/wtjones/wkEgn/</a></p>
  
  <p>What am I missing?</p>
  
  <pre><code>    &lt;form action='/someServerSideHandler'&gt;
      &lt;p&gt;You have asked for &lt;span data-bind='text: gifts().length'&gt;&amp;nbsp;&lt;/span&gt; gift(s)&lt;/p&gt;
      &lt;table data-bind='visible: gifts().length &gt; 0'&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Gift name&lt;/th&gt;
                  &lt;th&gt;Price&lt;/th&gt;
                  &lt;th /&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody data-bind='foreach: gifts'&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input class='required' data-bind='value: name, uniqueName: true' /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input class='required number' data-bind='value: price, uniqueName: true' /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;a href='#' data-bind='click: $root.removeGift'&gt;Delete&lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;button data-bind='click: addGift'&gt;Add Gift&lt;/button&gt;
      &lt;button data-bind='enable: gifts().length &gt; 0' type='submit'&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The model code:</p>
  
  <pre><code>var GiftModel = function(gifts) {
      var self = this;
      self.gifts = ko.observableArray(gifts);
  
      self.addGift = function() {
          self.gifts.push({
              name: "",
              price: ""
          });       
      };
  
      self.removeGift = function(gift) {
          self.gifts.remove(gift);                
      };
  
      self.save = function(form) {
          alert("Could now transmit to server: " + ko.utils.stringifyJson(self.gifts));
          // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.gifts);
      };
  };
  
  var viewModel = new GiftModel([
      { name: "Tall Hat", price: "39.95"},
      { name: "Long Cloak", price: "120.00"}
  ]);
  ko.applyBindings(viewModel);
  
  // Activate jQuery Validation
  //$("form").validate({ submitHandler: viewModel.save });
  </code></pre>