title: Backbone Marionette Nested Composite View
body: <p>So I am stuck. I got the great Backbone.Marionette to handle my nested childs/parents relationships and rendering(doing it with the bare backbone was a nightmare), but now i'm facing problems with my nested composite view,</p>
  
  <p>I'm always getting a <em>The specified <code>itemViewContainer</code> was not found: .tab-content</em> from the parent composite view - CategoryCollectionView, although the itemViewContainer is available on the template, here is what I'm trying to do, I have a restaurant menu i need to present, so I have several categories and in each category I have several menu items, so my final html would be like this:</p>
  
  <pre><code>    &lt;div id="order-summary"&gt;Order Summary Goes here&lt;/div&gt;
      &lt;div id="categories-content"&gt;
           &lt;ul class="nav nav-tabs" id="categories-tabs"&gt;
                &lt;li&gt;&lt;a href="#category-1"&gt;Appetizers&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
           &lt;div class="tab-content" &gt;
                 &lt;div class="tab-pane" id="category-1"&gt;
                      &lt;div class="category-title"&gt;...&lt;/div&gt;
                      &lt;div class="category-content"&gt;..the category items goes here.&lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>Here is what I have so far:</p>
  
  <p>First the templates</p>
  
  <p><strong>template-skeleton</strong></p>
  
  <pre><code>&lt;div id="order-summary"&gt;&lt;/div&gt;
  &lt;div id="categories-content"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>template-menu-core</strong></p>
  
  <pre><code>&lt;ul class="nav nav-tabs" id="categories-tabs"&gt;&lt;/ul&gt;
  &lt;div class="tab-content" &gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>template-category</strong></p>
  
  <pre><code>&lt;div class="category-title"&gt;
      &lt;h2&gt;&lt;%=name%&gt;&lt;/h2&gt;
      &lt;%=desc%&gt;
  &lt;/div&gt;
  &lt;div class="category-content"&gt;
      The menu items goes here
      &lt;ul class="menu-items"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>template-menu-item</strong></p>
  
  <pre><code>Item &lt;%= name%&gt;
  &lt;strong&gt;Price is &lt;%= price%&gt;&lt;/strong&gt;
  &lt;input type="text" value="&lt;%= quantity %&gt;" /&gt;
  &lt;a href="javascript:void()" class="add"&gt;Add&lt;/a&gt;
  </code></pre>
  
  <p>Now the script</p>
  
  <pre><code>var ItemModel = Backbone.Model.extend({
      defaults: {
          name: '',
          price: 0,
          quantity: 0
      }
  });
  
  var ItemView = Backbone.Marionette.ItemView.extend({
      template: '#template-menuitem',
      modelEvents: {
          "change": "update_quantity"
      },
      ui: {
          "quantity" : "input" 
      },
      events: {
          "click .add": "addtoBasket"
      },
      addtoBasket: function (e) {
          this.model.set({"quantity": this.ui.quantity.val() });
      },
      update_quantity: function () {
          //@todo should we do a re-render here instead or is it too costy
          this.ui.quantity.val(this.model.get("quantity"));
      }
  });
  
  var ItemCollection = Backbone.Collection.extend({
      model: ItemModel
  });
  
  
  
  var CategoryModel = Backbone.Model.extend({
      defaults: {
          name: ''
      }
  });
  
  var CategoryView = Backbone.Marionette.CompositeView.extend({
  
      template: '#template-category',
  
      itemViewContainer: ".menu-items",
      itemView: ItemView,
  
      className: "tab-pane",
      id: function(){
          return "category-" + this.model.get("id");
      },
  
      initialize: function () {
  
          this.collection = new ItemCollection();
          var that = this;
          _(this.model.get("menu_items")).each(function (menu_item) {
              that.collection.add(new ItemModel({
                  id: menu_item.id,
                  name: menu_item.name,
                  price: menu_item.price,
                  desc: menu_item.desc
              }));
          });
  
  
      }
  });
  
  
  var CategoryCollection = Backbone.Collection.extend({
      url: '/api/categories',
      model: CategoryModel
  });
  
  var CategoryCollectionView = Backbone.Marionette.CompositeView.extend({
  
      el_tabs: '#categories-tabs',
  
      template: '#template-menu-core',
      itemViewContainer: ".tab-content", // This is where I'm getting the error
      itemView: CategoryView,
  
      onItemAdded: function (itemView) {
          alert("halalouya");
          //this.$el.append("&lt;li&gt;&lt;a href=\"#cateogry-" + tab.get("id") + "\"&gt;" + tab.get("name") + "&lt;/a&gt;&lt;/li&gt;");
  
          //$(this.el_tabs).append("&lt;li&gt;&lt;a href='#category-" + itemView.model.get("id") + "'&gt;"
              //+ itemView.model.get("name") + "&lt;/a&gt;&lt;/li&gt;")
      }
  });
  </code></pre>
  
  <p>I know It's a bit hard to follow but you guys are my last resort. There is no problems with the templates and the cateogry fetching and the other stuff(it was already working before converting the CategoryCollectionView from a Marionette collection to a composite view.)</p>
  
  <p><strong>Edit 1</strong></p>
  
  <p>Added App initalizer on request:</p>
  
  <pre><code>            AllegroWidget = new Backbone.Marionette.Application();
  
              AllegroWidget.addInitializer(function (options) {
  
                  // load templates and append them as scripts
                  inject_template([
                          { id: "template-menuitem", path: "/js/templates/ordering-widget-menuitem.html" },
                          { id: "template-category", path: "/js/templates/ordering-widget-category.html" },
                          { id: "template-menu-core", path: "/js/templates/ordering-widget-menu-core.html" },
                          { id: "template-skeleton", path: "/js/templates/ordering-widget-skeleton.html" }
                      ]);
  
                  // create app layout using the skeleton
                  var AppLayout = Backbone.Marionette.Layout.extend({
                      template: "#template-skeleton",
  
                      regions: {
                          order_summary: "#order-summary",
                          categories: "#categories-content"
                      }
                  });
  
                  AllegroWidget.layout = new AppLayout();
                  var layoutRender = AllegroWidget.layout.render();
                  jQuery("#allegro-ordering-widget").html(AllegroWidget.layout.el);
  
                  // Initialize the collection and views
                  var _category_collection = new CategoryCollection();
  
                  var _cateogories_view = new CategoryCollectionView({ api_key: window.XApiKey, collection: _category_collection });
  
  
                  _category_collection.fetch({
                      beforeSend: function (xhr) {
                          xhr.setRequestHeader("X-ApiKey", window.XApiKey);
                      },
                      async: false
                  });
  
  
                  //AllegroWidget.addRegions({
                   ///   mainRegion: "#allegro-ordering-widget"
                  //});
                  AllegroWidget.layout.categories.show(_cateogories_view);
  
              });
  
  
  
              AllegroWidget.start({api_key: window.XApiKey});
  </code></pre>