title: Sequentially binding partial views to knockout viewmodel
body: <p>I have a form that contains a main view with a grid and several (bootstrap) modal forms.  The modal forms are quite complex and take quite a while to download. Everything on the form is currently bound to a single knockout viewmodel. That viewmodel contains (among other things) arrays of dropdown items and subclasses of observable properties that are bound to the modal form elements.</p>
  
  <p>Currently the entire form and data must download before the user can interact with the page.  I'd like to break it down so that the loading flows in the following manner:</p>
  
  <ol>
  <li>Basic form elements and css </li>
  <li>VM is instantiated</li>
  <li>data for the grid downloads</li>
  <li>grid is bound to vm</li>
  <li>user can begin to interact</li>
  <li>elements of most commonly used modal form download</li>
  <li>modal form is bound to the VM</li>
  <li>repeat 6 &amp; 7 for all modal forms</li>
  </ol>
  
  <p>I've successfully been able to download the modal forms after the grid is bound as partial views, but now I get an error that "You cannot apply bindings multiple times to the same element."  Is there a way to bind my partial views to the same viewmodel sequentially?</p>
  
  <p>Here's my code that binds the base page to the vm. Note that it then calls loadQuoteModal which loads the Quote Modal Form.</p>
  
  <pre><code>$(document).ready(function () {
       var vm = new ClientListViewModel();
       ko.applyBindings(vm, document.getElementById("#baseClient"));
       vm.loadQuoteModal();
  });
  </code></pre>
  
  <p>Here's loadQuoteModal on my vm.</p>
  
  <pre><code>self.loadQuoteModal = function () {
          var d = $.Deferred();
          var xhr = $.get('/Home/QuoteModalForm');
          xhr.done(function (partialViewResult) {
              $("#LoadQuote").html(partialViewResult);
              ko.applyBindings(this, document.getElementById("#quoteDiv"));
              self.quoteLoaded = true;
          });
          return d;
      }
  </code></pre>
  
  <p>And here's my page.</p>
  
  <pre><code>&lt;div id="baseClient"&gt;
      &lt;div class="col-md-12" id="clientHeader"&gt;
          //Many elements not relevent
      &lt;/div&gt;
  
      &lt;div class="col-md-12" id="clientDiv"&gt;
          //Many elements not relevent
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="quoteDiv"&gt;
  &lt;/div&gt;
  </code></pre>