title: Unable to bind to a view with compose containerless code
body: <p>This is <em>kind of</em> related to my recent question about multiple views within one page.  I started with the Durandal sample knockout shell and attempted to extract the navigation menu on the left into its own "navList.html/navList.js" view/viewmodel.</p>
  
  <p>I created navList.html and navlist.js:</p>
  
  <pre><code>&lt;ul class="nav nav-list"&gt;
      &lt;li class="nav-header"&gt;Basic Examples&lt;/li&gt;
  
      &lt;!--ko foreach: introSamples--&gt;
      &lt;li data-bind="css: { active: isActive }"&gt;
          &lt;a data-bind="attr: { href: hash }, text: title"&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;!--/ko--&gt;
  
      &lt;li class="nav-header"&gt;Detailed Examples&lt;/li&gt;
  
  
      &lt;!--ko foreach: detailedSamples--&gt;
      &lt;li data-bind="css: { active: isActive }"&gt;
          &lt;a data-bind="attr: { href: hash }, text: title"&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;!--/ko--&gt;
  &lt;/ul&gt;
  
  define(['plugins/router', 'knockout'], function (router, ko) {
  var childRouter = router.createChildRouter()
      .makeRelative({
          moduleId: 'ko',
          fromParent: true
      }).map([
          { route: '', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro' },
          { route: 'helloWorld', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro', nav: true },
          { route: 'clickCounter', moduleId: 'clickCounter/index', title: 'Click Counter', type: 'intro', nav: true },
          { route: 'simpleList', moduleId: 'simpleList/index', title: 'Simple List', type: 'intro', nav: true },
          { route: 'betterList', moduleId: 'betterList/index', title: 'Better List', type: 'intro', nav: true },
          { route: 'controlTypes', moduleId: 'controlTypes/index', title: 'Control Types', type: 'intro', nav: true },
          { route: 'collections', moduleId: 'collections/index', title: 'Collection', type: 'intro', nav: true },
          { route: 'pagedGrid', moduleId: 'pagedGrid/index', title: 'Paged Grid', type: 'intro', nav: true },
          { route: 'animatedTrans', moduleId: 'animatedTrans/index', title: 'Animated Transition', type: 'intro', nav: true },
          { route: 'contactsEditor', moduleId: 'contactsEditor/index', title: 'Contacts Editor', type: 'detailed', nav: true },
          { route: 'gridEditor', moduleId: 'gridEditor/index', title: 'Grid Editor', type: 'detailed', nav: true },
          { route: 'shoppingCart', moduleId: 'shoppingCart/index', title: 'Shopping Cart', type: 'detailed', nav: true },
          { route: 'twitterClient', moduleId: 'twitterClient/index', title: 'Twitter Client', type: 'detailed', nav: true }
      ]).buildNavigationModel();
  
  return {
      router: childRouter,
      introSamples: ko.computed(function () {
          return ko.utils.arrayFilter(childRouter.navigationModel(), function (route) {
              return route.type == 'intro';
          });
      }),
          detailedSamples: ko.computed(function () {
              return ko.utils.arrayFilter(childRouter.navigationModel(), function (route) {
                  return route.type == 'detailed';
              });
          })
      };
  });
  </code></pre>
  
  <p>...which are pretty much identical copies of the original index.html and index.js files.</p>
  
  <p>I then turned index.js into this:</p>
  
  <pre><code>define(['ko/navList'], function(nav) {
  
      return {
          router: nav.router
      };
  });
  </code></pre>
  
  <p>and index.html into this:</p>
  
  <pre><code>&lt;div class="container-fluid knockout-samples"&gt;
    &lt;div class="row-fluid"&gt;
      &lt;div class="span2 well"&gt;
          &lt;!--ko compose: {view: navList, 
              transition: 'entrance'} --&gt;
          &lt;!--/ko--&gt;
      &lt;/div&gt;
        &lt;div class="span10"&gt;
            &lt;!--ko router: { transition:'entrance', cacheViews:true }--&gt;&lt;!--/ko--&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...which is not a major change.  All I'm trying to achieve at this point is education via tinkering. I figured that if I could deconstruct/reconstruct a working example I'd be a step further along my line of understanding of how to structure my app.</p>
  
  <p>Of course, where this goes wrong is on the binding to navList.  It appears that despite being told to go and look for navList as a view, it's treating it as part of the index.js model as far as I can tell so I get this in the console window:</p>
  
  <pre><code>Binding ko/index 
  Object {router: Object, __moduleId__: "ko/index"}
   system.js:75
  Unable to parse bindings.
  Bindings value: compose: {view: navList, 
              transition: 'entrance'} 
  Message: navList is not defined;
  View: ko/index;
  ModuleId: ko/index 
  </code></pre>
  
  <p>Could some kind soul please explain the fundamental understanding issue I have here please?</p>
  
  <p>Solution:
  As pw kad suggested, using the container "data-bind" syntax in index.html instead of containerless as I was trying to do has fixed the problem.  The code is now:</p>
  
  <pre><code>&lt;div class="container-fluid knockout-samples"&gt;
    &lt;div class="row-fluid"&gt;
      &lt;div class="span2 well" data-bind="compose: 'ko/navList'"&gt;&lt;/div&gt;
        &lt;div class="span10"&gt;
            &lt;!--ko router: { transition:'entrance', cacheViews:true }--&gt;&lt;!--/ko--&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>