web-dev-qa-db-ja.com

Backbone.jsコレクションをレンダリングする

私はBackbone.jsn00bであり、頭を悩ませようとしています。ビューと組み込みのunderscore.jsテンプレートエンジンを使用してモデルをレンダリングする方法を知っています。今、私はコレクションをレンダリングしようとしていますが、そこで行き詰まります。ここにはサーバーがないので、リモートで何もフェッチしていません。JavaScriptを使用した単純なHTMLページだけです。

ContinentModel = Backbone.Model.extend({});

ContinentsCollection = Backbone.Collection.extend({
  model: ContinentModel,

  initialize: function () {
    this.continentsView = new ContinentsView;
    this.bind("reset", this.continentsView.render);
  }
});

ContinentsView = Backbone.View.extend({
  el: '#continents',
  template: _.template($('#continents-template').html()),

  render: function() {
    var renderedContent = this.template(this.collection.toJSON());
    $(this.el).html(renderedContent);
    return this;
  }
});

$(function() {
  var continentsCollection = new ContinentsCollection();
  continentsCollection.reset([{name: "Asia"}, {name: "Africa"}]);
});

ビューのテンプレート属性行で壊れていますが、それがどこにあるのかわかりません。コレクションをレンダリングすることになっていますか、それともここでポイントを完全に見逃していますか（コレクションはオブジェクトをグループ化するだけであり、レンダリングできるリストとして見るべきではありません）？

助けてくれてありがとう...

collectionsbackbone.jsrender
15
Cimm

問題は、ContinentsViewを定義すると、テンプレートが評価され、$('#continents-template')を使用することですが、DOMはまだ準備ができていないため、テンプレートが見つかりません。

これを解決するには、初期化関数でテンプレートの割り当てを移動するだけです。

ContinentsView = Backbone.View.extend({
  el: '#continents',
  initialize: function() {
     this.template = _.template($('#continents-template').html());
  }
  ...

コレクションに関しては、はい、それらはオブジェクト、具体的にはモデルのセットをグループ化しています。

モデル（およびコレクション）がビューを認識せず、ビューのみがモデルを認識できるようにコードを作成する必要があります。

ContinentModel = Backbone.Model.extend({});

ContinentsCollection = Backbone.Collection.extend({
  model: ContinentModel,
  // no reference to any view here    
});

ContinentsView = Backbone.View.extend({
  el: '#continents',

  initialize: function() {
    this.template = _.template($('#continents-template').html());
    // in the view, listen for events on the model / collection
    this.collection.bind("reset", this.render, this);
  },

  render: function() {
    var renderedContent = this.template(this.collection.toJSON());
    $(this.el).html(renderedContent);
    return this;
  }
});

$(function() {
  var continentsCollection = new ContinentsCollection();
  continentsCollection.reset([{name: "Asia"}, {name: "Africa"}]);
  // initialize the view and pass the collection
  var continentsView = new ContinentsView({collection: continentsCollection});
});
32
dira

また、ビューでコレクションをレンダリングするときに頭をすばやく後ろに向ける複雑さが追加されていることにも注意してください。たとえば、モデルがコレクションに追加またはコレクションから削除されると、通常、ビューを再レンダリングする必要があります。独自のソリューションを実装することはロケット科学ではありませんが、試行錯誤されたソリューションがかなりの数あるため、既存のソリューションを調べる価値はあります。

Backbone.CollectionView は、マウスクリックに応じたモデルの選択、ドラッグアンドドロップに基づくコレクションの並べ替え、表示されているモデルのフィルタリングなどを処理する堅牢なコレクションビュークラスです。

バックボーンの上に構築されたいくつかの一般的なフレームワークは、 Backbone.Marionette 、 Chaplin 、 Layout Manager などの単純なコレクションビュークラスも提供します。

バックボーン自体はコレクションをレンダリングするための構造を提供していませんが、それは重要な問題であり、多くの人々が どのように行うべきか について異なる意見を持っています。幸いなことに、それは非常に一般的なニーズであるため、エコシステムにはすでにかなりの数の優れたオプションがあります。

6
Brave Dave