title: Knockout virtual compose with ViewModel constructors
body: <p>I am having some strange functionality with a virtual Knockout compose using 3 pairs of Views/ViewModels</p>
  
  <p>autoAttendant.js</p>
  
  <pre><code>define(['durandal/app', 'viewmodels/settings/autoAttendant/menu'], function(app, Menu){
  
      return function() {
          var self = this;
  
          self.attendant = ko.observable();
  
          self.activate = function() {
              self.autoAttendant(new Menu());
          };
      };
  });
  </code></pre>
  
  <p>autoAttendant.html</p>
  
  <pre><code>&lt;div id="content_pane" class="pushed_right"&gt;
      &lt;div class="content_box"&gt;
          &lt;h1&gt;Attendant&lt;/h1&gt;
  
          &lt;!-- ko compose: 'viewmodels/settings/autoAttendant/menu' --&gt;&lt;!--/ko--&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>menu.js</p>
  
  <pre><code>define(['durandal/app', 'viewmodels/settings/autoAttendant/menuItem'], function(app, MenuItem) {
  
      return function() {
          var self = this;
  
          self.menuItems = ko.observableArray([
              new MenuItem('val1', 'label1'),
              new MenuItem('val2', 'label2'),
              // etc...
          ]);
      };
  });
  </code></pre>
  
  <p>menu.html</p>
  
  <pre><code>&lt;div class="list"&gt;
      &lt;div class="box_item master"&gt;
          &lt;!-- html content --&gt;
      &lt;/div&gt;
      &lt;!-- ko foreach: { data: menuItems } --&gt;
          &lt;!-- ko compose: 'viewmodels/settings/autoAttendant/menuItem' --&gt;&lt;!--/ko--&gt;
      &lt;!-- /ko --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>menuItem.js</p>
  
  <pre><code>define(['durandal/app'], function(app) {
      var menuItem =  function(val, label, active) {
          var self = this;
  
          console.log('val:', val, 'label:', label, 'active:', active); // purely for testing purposes
  
          var _val = val || 'default_val',
              _label = label || 'default_label',
              _active = active || false;
  
          self.val = ko.observable(_val);
          self.label = ko.observable(_label);
          self.active = ko.observable(_active);
      };
      return menuItem;
  });
  </code></pre>
  
  <p>menuItem.html</p>
  
  <pre><code>&lt;div class="level"&gt;
      &lt;div class="box_item clickable"&gt;
          &lt;!-- html content --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Together these represent a single page within settings that displays a menu and that menu's sub-items.</p>
  
  <p>Menu and MenuItem <em>must</em> be detached from the attendant View/ViewModel as the menu itself is recursive and a menuItem can link to a sub-menu with its own menuItems.</p>
  
  <p>The problem comes in at the 2nd <code>ko compose</code>. The <code>console.log</code> occurs 3 times and the first 2 it shows the correct passing arguments to the MenuItem constructors in the menu.js:</p>
  
  <p><code>val: val1 label: label1 active: undefined</code></p>
  
  <p>At the final <code>console.log</code> print out, the parameters that had been passed are overwritten like so:</p>
  
  <p><code>val: &lt;!-- ko compose: 'viewmodels/settings/autoAttendant/menuItem' --&gt;&lt;!--/ko--&gt; label: Object {model: "viewmodels/settings/autoAttendant/menuItem", bindingContext: L.b.z, activeView: null}
   active: undefined</code></p>
  
  <p>Why does this happen?</p>