title: Dynamically bind a knockout component with a cshtml template breaks the viewmodel
body: <p>I have an issue with knockout components in our SPA, on a certain page I'm trying to implement a component; all observables passed through the <code>params</code> attribute are working as they should. But when I create <code>ko.observable(), ko.computed, ..</code> in the component's viewmodel they just don't work as they should. (Btw we're working with asp.net mvc and we need to serve cshtml files as the templates, the razor in the views helps us with several parsing options)</p>
  
  <p>So getting the files are not directly the issue, what is weird is that in the cshtml file, i can't use the unwrapped <code>text: test</code>, I have to write <code>text: test()</code>. computeds aren't updated either, nothing seems to do what it should.</p>
  
  <p>What I think I'm missing is that the component is never added through ko.applyBindings() but that's purely a guess. can anybody shed some light on this please?</p>
  
  <p>What to do with adding a knockout component after page has already loaded. And yes I've searched around, been fiddling all day without avail.. thanks in advance.</p>
  
  <p>This is in our mainpage.</p>
  
  <pre><code>&lt;track-item-list params="value: data, selected: selectedItems"&gt;&lt;/track-item-list&gt;
  </code></pre>
  
  <p>Below within script tags: </p>
  
  <pre><code>if (!ko.components.isRegistered('track-item-list')) {
          ko.components.register('track-item-list', { require: '@Url.Content("~/Scripts/viewmodels/items/_cItemList.js")' });
      }
  </code></pre>
  
  <p>There's a viewmodel js file:</p>
  
  <pre><code>define(['knockout', 'cshtml!/items/_cItemList'], function (ko, cshtmlString) {
  
      function ItemViewModel(params) {
          var self = this;
          self.selected = params.selected;
          self.test = ko.observable('Hello World!');
      }
  
      return { viewModel: ItemViewModel, template: cshtmlString };
  });
  </code></pre>
  
  <p>cshtml template:</p>
  
  <pre><code>&lt;span data-bind="text: selected().length"&gt;&lt;/span&gt;
  &lt;ul data-bind="foreach: selected"&gt;
      &lt;li data-bind="text: Total"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;span data-bind="text: test"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The cshtml file is loaded via a custom script:</p>
  
  <pre><code>define(['jquery'], function($) {
  
      var buildText = {};
  
      return {
  
          load: function (name, req, onLoad, config) {
              var self = this,
              file = name,
              segments = file.split('/');
  
              // If the module name does not have an extension, append the default one
              if (segments[segments.length - 1].lastIndexOf('.') == -1) {
                  file += '.cshtml';
              }
  
              $.get(name, function (html, status, xhr) {
                  console.log('html loaded: ' + name);
                  onLoad(html);
              });
          }
      };
  });
  </code></pre>