骨干网 + jQuery .append()

Question

我已经梳理了大多数相关的帖子，但找不到类似的案例。我有点难过，希望你们能解决问题。

我正在使用带有 REST+JSON API 的 Backbone + jQuery + Handlebars + Bootstrap。

我正在尝试构建可能包含文本的多个项目的可折叠视图。折叠分为三个级别：1）仅项目，2）项目+文本标题，3）项目+文本标题+全文。

应该发生的是，ItemListView 从 API 中提取所有项目并为每个项目呈现一个 ItemView。 ItemView 进一步细分为两个 Handlebars 模板 - 第一个用于特定于项目的标记，另一个用于特定于文本的标记。

问题似乎是this.model.get("texts").forEach(function(txt, that) 中的$("#item" + itemNum) 选择器不匹配任何内容（或者至少.append() 不添加任何内容）。

我尝试将选择器更改为$("item1")，但随后代码变得非常糟糕，生成了一个 Handlebars 模板，其中包含第一个 Item 的第一个 Text 的标题和 other Item 的内容正文正文：

<div id="item1" class="item in collapse" style="height: auto;">
<ul class="text-list"></ul>

<li class="text-container"><span class="pict text-title collapsed" data-toggle="collapse" data-target="#text2-1">Otsikko 1</span>
  <span id="text2-1" class="collapse item-text in" style="height: 0px;"><br>Teksti 3</span></li>
</div>

还要注意奇怪的style="height: 0px;" 和item in collapse，它们似乎不是来自任何地方（至少不是我的模板...）。

API目前返回如下测试数据（两个Item，第一个有两个Text，第二个有一个）：

[{"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"}]

我对整个事情有一个看法：

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
    }));
  });

以防万一，这里是列表视图：

  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);
    }
  });

...和 ​​Handlebars 模板：

<script id="item-template" type="text/x-handlebars-template">
  <span class="item-title pict" data-toggle="collapse" data-target="#item{{itemNum}}">{{itemName}}</span>
  <div id="item{{itemNum}}" class = "collapse item">
    <ul class="text-list"></ul>
  </div>
</script>

<script id="text-template" type="text/x-handlebars-template">
  <li class="text-container"><span class="pict text-title" data-toggle="collapse" data-target="#text{{itemNum}}-{{textNum}}">Otsikko {{textNum}}</span>
  <span id="text{{itemNum}}-{{textNum}}" class="collapse item-text"><br>{{text}}</span></li>
</script>

...和正在呈现的 HTML：

<div class="span2" id="items">
  <div id="item-list"></div>
</div>

谢谢！我已经用头撞墙好几个小时了，不知道该怎么办。

另外，我这个周末才编写了我的第一个 Backbone.js 代码，所以我很感激你可能有任何关于风格/设计的 cmet。 :)

Answer 1

好的，我有时间再看一遍，发现这是一个简单的错误

$(this.el).html(itemTemplate({
    itemNum: itemNum,
    itemName: this.model.get("name"),
}));

将 .html() 更改为 .append() 就成功了，这并不奇怪......