title: Backbone + jQuery .append()
body: <p>I've combed through most relevant posts and I couldn't find a similar case. I'm somewhat stumped, hope you guys might figure out the problem.</p>
  
  <p>I'm using Backbone + jQuery + Handlebars + Bootstrap with a REST+JSON API.</p>
  
  <p>I'm trying to build a collapsible view of multiple Items that may contain Texts. There are three levels of collapsing: 1) only the Items, 2) Items + Text titles, 3) Items + Text titles + full Texts.</p>
  
  <p>What should happen is that ItemListView pulls all Items from the API and renders an ItemView for each one. The ItemView is further broken down to two Handlebars templates - the first one for item-specific markup and the other for text-specific markup.</p>
  
  <p>The problem seems to be that the <code>$("#item" + itemNum)</code> selector inside <code>this.model.get("texts").forEach(function(txt, that)</code> doesn't match anything (or at least <code>.append()</code> doesn't add anything).</p>
  
  <p>I've tried changing the selector to <code>$("item1")</code> but then the code goes totally barmy, producing a Handlebars template with the title of the first Item's first Text and the content of the <em>other</em> Item only Text's text:</p>
  
  <pre><code>&lt;div id="item1" class="item in collapse" style="height: auto;"&gt;
  &lt;ul class="text-list"&gt;&lt;/ul&gt;
  
  &lt;li class="text-container"&gt;&lt;span class="pict text-title collapsed" data-toggle="collapse" data-target="#text2-1"&gt;Otsikko 1&lt;/span&gt;
    &lt;span id="text2-1" class="collapse item-text in" style="height: 0px;"&gt;&lt;br&gt;Teksti 3&lt;/span&gt;&lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also note the strange <code>style="height: 0px;"</code> and <code>item in collapse</code> which don't seem to come from anywhere (at least not my templates...).</p>
  
  <p>The API currently returns the following test data (two Items, the first one has two Texts and the second one has one):</p>
  
  <pre><code>[{"texts": [{"text": "Teksti 1", "id": 1, },
              {"text": "Teksti 2", "id": 2, }],
    "open": false,
    "id": 1,
    "name": "Asia 1"},
   {"texts": [{"text": "Teksti 3", "id": 1, }],
    "open": false,
    "id": 2,
    "name": "Asia 2"}]
  </code></pre>
  
  <p>I have a View for the whole thing:</p>
  
  <pre><code>var ItemView = Backbone.View.extend({
    tagName: 'div',
  
    initialize: function () {
      _.bindAll(this, 'render');
      this.model.bind('change', this.render);
    },
  
    render: function (itemNum) {
  
    // Render item titles
  
    try {
      var src = $("#item-template").html();
      var itemTemplate = Handlebars.compile(src);
    } catch (e) {
      console.log(e)
    }
  
    $(this.el).html(itemTemplate({
      itemNum: itemNum,
      itemName: this.model.get("name"),
    }));
  
    // Add texts under titles
  
    try {
      var src = $("#text-template").html();
      var textTemplate = Handlebars.compile(src);
    } catch (e) {
      console.log(e)
    }
  
    // MOST LIKELY THE PROBLEM:
    var counter = 0;
    this.model.get("texts").forEach(function(txt) {
      console.log(txt.text);
      counter++;        
      $("#item1").append(textTemplate({
        itemNum: itemNum,
        textNum: counter,
        text: txt.text
      }));
    });
  </code></pre>
  
  <p>Just in case, here's the list view:</p>
  
  <pre><code>  var ItemListView = Backbone.View.extend({
      el: $('#items'),
  
      initialize: function () {
        _.bindAll(this, 'render', 'appendItem');
        this.items = new Items();      
  
        this.render();
      },
  
      render: function () {
        var self = this, p;
        p = this.items.fetch();
  
        p.done(function () {
          var itemCount = 0;
          _(self.items.models).each(function(item) {
            itemCount++;
            self.appendItem(item, itemCount);
          }, self);
        });
      },
  
      appendItem: function (item, itemCount) {
        var itemView = new ItemView({
          model: item
        });
        $('#item-list', this.el).append(itemView.render(itemCount).el);
      }
    });
  </code></pre>
  
  <p>...and Handlebars templates:</p>
  
  <pre><code>&lt;script id="item-template" type="text/x-handlebars-template"&gt;
    &lt;span class="item-title pict" data-toggle="collapse" data-target="#item{{itemNum}}"&gt;{{itemName}}&lt;/span&gt;
    &lt;div id="item{{itemNum}}" class = "collapse item"&gt;
      &lt;ul class="text-list"&gt;&lt;/ul&gt;
    &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script id="text-template" type="text/x-handlebars-template"&gt;
    &lt;li class="text-container"&gt;&lt;span class="pict text-title" data-toggle="collapse" data-target="#text{{itemNum}}-{{textNum}}"&gt;Otsikko {{textNum}}&lt;/span&gt;
    &lt;span id="text{{itemNum}}-{{textNum}}" class="collapse item-text"&gt;&lt;br&gt;{{text}}&lt;/span&gt;&lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>...and HTML being rendered:</p>
  
  <pre><code>&lt;div class="span2" id="items"&gt;
    &lt;div id="item-list"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks! I've been banging my head at a wall for several hours and don't know what to do.</p>
  
  <p>Also, I only did my first Backbone.js code this weekend, so I appreciate any comments on style/design you might have. :)</p>