0

私は最も関連性の高い投稿を調べましたが、同様のケースは見つかりませんでした。私は少し困惑しています、皆さんが問題を理解するかもしれないことを願っています。

私はREST+JSONAPIでBackbone+jQuery + Handlebars+Bootstrapを使用しています。

テキストを含む可能性のある複数のアイテムの折りたたみ可能なビューを作成しようとしています。折りたたみには3つのレベルがあります：1）アイテムのみ、2）アイテム+テキストタイトル、3）アイテム+テキストタイトル+フルテキスト。

何が起こるかというと、ItemListViewはAPIからすべてのアイテムをプルし、それぞれに対してItemViewをレンダリングします。ItemViewは、さらに2つのハンドルバーテンプレートに分割されます。1つはアイテム固有のマークアップ用で、もう1つはテキスト固有のマークアップ用です。

問題は、$("#item" + itemNum)内部のセレクターがthis.model.get("texts").forEach(function(txt, that)何にも一致しない（または少なくとも.append()何も追加しない）ことのようです。

セレクターをに変更しようとしました$("item1")が、コードが完全にバーミーになり、最初のアイテムの最初のテキストのタイトルと他のアイテムのみのテキストのテキストのタイトルを持つハンドルバーテンプレートが生成されます。

<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は現在、次のテストデータを返します（2つのアイテム、最初のアイテムには2つのテキストがあり、2番目のアイテムには1つのテキストがあります）。

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

OK、これをもう一度見てみると、単純な間違いであることがわかりました

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

当然のことながら、に変更.html()すると.append()うまくいきました...

于 2013-03-02T17:19:06.533 に答える