title: Single page application using mvc3 knockout.js and sammy.js
body: <p>I'm stuck on one particular part of my project which consists of the components mentioned in the title. </p>
  
  <p>I currently have a proof of concept that works the way I want it to work: </p>
  
  <ul>
  <li>Sammy is integrated into the knockout viewmodels (as per the tutorial
  on the knockout site)  </li>
  <li>the views are loaded on demand by a controller
  (so I don't have to define every single view on the application page)</li>
  </ul>
  
  <p>In my current situation I instance the viewmodels when the application starts (if I don't instance them, Sammy will not handle the routing). The problem is where the view is loaded and swapped by Sammy. I have to make a call to ko.applyBindings for KO to bind to the view. But its bad practice to repeatedly call applybingings.</p>
  
  <p>My question, how do I bind to my views that are loaded on demand? I can't call ko.applybindings since that would create a memoryleak when the view is loaded more than once.</p>
  
  <p>Here is an example VM with the offending ko.applyBindings:</p>
  
  <pre><code>function serviceInfoVm() {
  var self = this;
  
  self.ObjectKey = ko.observable();
  self.Service = ko.observable();
  
  self.LoadService = function () {
      $.get('ServiceData/Detail', { serviceId: self.ObjectKey() }, function (data) {
          self.Service(data);
      });
  };
  
  $.sammy('#content', function () {
      this.get('#/service/:id', function (context) {
          var ctx = context;
          self.ObjectKey(this.params['id']);
  
          self.LoadService();
  
          $.get('Content/ServiceInfo', function (view) {
              ctx.app.swap(view);
              ko.applyBindings(self);
          });
      });
  
  }).run();
  };
  </code></pre>
  
  <p>Anyone with some pointers and/or solutions to this problem?</p>