title: Knockout foreach flaky with checkbox initialization, works with templates
body: <p>There have been a lot of questions posted about using checkboxes in a foreach loop in Knockout, but I haven't seen an answer to why initalizing the checked binding works in some situations and not others.</p>
  
  <p>With this simple viewmodel:</p>
  
  <pre><code>viewModel = function (obj) {
      this.AllPossibleThings = ko.observableArray(
      [
          { ID: "1", Value: 'Thing1' }, 
          { ID: "2", Value: 'Thing2' }, 
          { ID: "3", Value: 'Thing3' }, 
          { ID: "4", Value: 'Thing4' }
      ]);
      this.selectedThings = ko.observableArray(["2","3"]);
  };
  $(ko.applyBindings(new viewModel()));
  </code></pre>
  
  <p>Putting these in a foreach template works as you'd expect.  It shows 4 checkboxes, with 2 and 3 pre-checked:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody data-bind="template: { name: 'ThingTmpl', foreach: AllPossibleThings }"&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;script id="ThingTmpl" type="text/html"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="checkbox" 
                        data-bind="attr: {value: ID}, checked: $root.selectedThings" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;span data-bind="text: Value"&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Doing what should be the equivalent without a template doesn't work the same:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody data-bind="foreach: AllPossibleThings"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="checkbox" 
                        data-bind="checked: $root.selectedThings, 
                                   attr: {value: ID}" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;span data-bind="text: Value"&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The non-template one shows 4 checkboxes, but with none pre-checked.  BUT, when you click, say, the 1st checkbox then 2 and 3 get checked.  It's like it got bound before the "selectedThings" array got created and the change was never observed.</p>
  
  <p>Fiddle to demonstrate with both: <a href="http://jsfiddle.net/jturnage/j763w/" rel="nofollow">http://jsfiddle.net/jturnage/j763w/</a></p>
  
  <p>Anybody know why the template foreach works here, but the regular foreach binding does not?</p>