Question

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

我使用Backbone + jQuery + Handlebars + Bootstrap和REST + JSON API。

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

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

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

我已经尝试将选择器更改为$("item1")但是代码完全变成了barmy，产生了Handlebars模板，其中包含第一个Item的第一个Text和其他仅限项目文字的文字：

<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当前返回以下测试数据（两个项目，第一个有两个文本，第二个有一个）：

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

...和把手模板：

<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代码，所以我很欣赏你对样式/设计的任何评论。：）

Answer 1

好的，我有时间再看一遍，发现这是

中的一个简单错误

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

将.html()更改为.append()就行了，不出所料......

Backbone + jQuery .append（）

1 个答案: