0

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

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

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

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

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

我尝试将选择器更改为，$("item1")但随后代码变得非常笨拙，生成了一个 Handlebars 模板，其中包含第一个 Item 的第一个 Text 的标题和另一个Item only 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当前返回如下测试数据（两个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);
    }
  });

...和车把模板：

<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 代码，所以我很感激你对风格/设计的任何评论。:)

4

1 回答 1

0

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

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

毫不奇怪，更改.html()为成功了....append()

于 2013-03-02T17:19:06.533 回答