Handlebars.jsを使用したBackbone.jsに関する質問

Question

Handelbarsを使用した私のbackbone.jsアプリケーションでは、以下のことが行われます。

1. モデル、そのコレクション、ビュー、およびルータを設定します。
2. 最初に、サーバーから記事のリストを取得し、Handlebars.jsテンプレート経由でビューを使用してレンダリングします。

コードは以下のとおりです。

(function ($) 
    { 
     // model for each article 
     var Article = Backbone.Model.extend({}); 

     // collection for articles 
     var ArticleCollection = Backbone.Collection.extend({ 
     model: Article 
     }); 

     // view for listing articles 
     var ArticleListView = Backbone.View.extend({ 
     el: $('#main'), 
     render: function(){ 
      var js = JSON.parse(JSON.stringify(this.model.toJSON())); 
      var template = Handlebars.compile($("#articles_hb").html()); 
      $(this.el).html(template(js[0])); 
      return this; 
     } 
     }); 

     // main app 
     var ArticleApp = Backbone.Router.extend({ 
     _index: null, 
     _articles: null, 

     // setup routes 
     routes: { 
      "" : "index" 
     }, 

     index: function() { 
      this._index.render(); 
     }, 

     initialize: function() { 
      var ws = this; 
      if(this._index == null) { 
      $.get('blogs/articles', function(data) { 
       var rep_data = JSON.parse(data); 
       ws._articles = new ArticleCollection(rep_data); 
       ws._index = new ArticleListView({model: ws._articles}); 
       Backbone.history.loadUrl(); 
      });    
      return this; 
     } 
     return this; 
     } 
    }); 

    articleApp = new ArticleApp(); 
    })(jQuery); 

Handlebars.jsテンプレートは

<script id="articles_hb" type="text/x-handlebars-template"> 
    {{#articles}} 
    {{title}} 
    {{/articles}} 
</script> 

上記のコードは正常に動作し、それが記事のタイトルを印刷しています。 Handlebars.jsテンプレートにコンテキストを渡すとき、私は現在$(this.el).html(template(js[0]))をしています

1. しかし、私の質問です。これは正しい方法ですか？ js [0]の代わりに "js"だけを実行すると、JSONオブジェクトには大括弧と末尾の角括弧が付きます。したがって、JSONオブジェクトの配列オブジェクトとして認識されます。だから私はjs [0]にしなければならなかった。しかし、私はそれが適切な解決策ではないように感じます。

2. 「ビュー」を初めて作成するときは、次のように作成しています。

   ws._index = new ArticleListView（{model：ws._articles}）;

しかし、私の場合、私は

ws._index = new ArticleListView({collection: ws._articles}); 

Iない万一すればよいですか？ （私はチュートリアルbtwに従っていた）。それともこの問題？私は両方を試みましたが、それほど大きな違いはありませんでした。

ありがとうございます。

Answer 1

の場合はの場合はmodelの代わりにcollectionを使用してビューを初期化する必要がありますので、コレクションのビューを作成しているようです。

var ArticleListView = Backbone.View.extend({ 
    el: $('#main'), 
    render: function(){ 
     var js = this.collection.toJSON(); 
     var template = Handlebars.compile($("#articles_hb").html()); 
     $(this.el).html(template({articles: js})); 
     return this; 
    } 
    }); 

して、テンプレート

{{#each articles}} 
    {{this.title}} 
    {{/each}} 

のために、このようなものを使用します。限りハンドルとして、私はそれをたくさん使用していないが、私はあなたがこのような何かをしたいと思います

psライン JSON.parse(JSON.stringify(this.model.toJSON()))がthis.model.toJSON()

希望に相当し、この

Answer 2

var ArticleListView = Backbone.View.extend({ 
    initialize: function(){ 
     this.template = Handlebars.compile($('#articles_hb').html()); 
    }, 
    render: function(){ 
     $(this.el).html(this.template(this.model.toJSON())); 
     return this; 
    } 
    }); 

を助け//////////////////////////// /////////

ws._index = new ArticleListView({model: ws._articles});