title: Knockout nested bindings
body: <p>I'm having a problem using knockout and a form and getting bindings to apply without throwing errors.  </p>
  
  <p>I would like to split the logic for the form into several view models but I'm getting errors with bindings in bars and foos not being found when I attempt to bind foobar</p>
  
  <p>I've tried to display this in the example below.</p>
  
  <p>Is there a way to achieve the desired behaviour? Is there a way to say combine all the bindings from the three view models then assign them to foobar?</p>
  
  <p>bars_observable is a ko.observable created in the contructor of barViewModel.</p>
  
  <pre><code>&lt;div id="foobar"&gt;
      &lt;form data-bind="with: newFooBar, submit: submitFooBar"&gt;
          &lt;section id="bars"&gt;
              &lt;div data-bind="text: bars_observable"&gt;&lt;/div&gt;
          &lt;/section&gt;
  
          &lt;section id="foos"&gt;
              foo stuff
          &lt;/section&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      $(function () {
          var foobarViewModel, fooViewModel, barViewModel;
  
          foobarViewModel = new ViewModels.FoobarViewModel({
              fooViewModel: new ViewModels.FooViewModel({}),
              barViewModel: new ViewModels.BarViewModel({})
          });
  
          ko.applyBindings(foobarViewModel, document.getElementById("foobar"));
      });  
  &lt;/script&gt;
  </code></pre>
  
  <p>The error would be</p>
  
  <pre><code>"Uncaught Error: Unable to parse bindings. Message: ReferenceError: bars_observable is not defined;"
  </code></pre>