Domande su Backbone.js con Handlebars.js

Question

La mia app backbone.js con Handelbars effettua le seguenti operazioni.

1. impostare un modello, la relativa raccolta, visualizzazione e router.
2. all'inizio, ottenere un elenco di articoli dal server e renderlo utilizzando la vista tramite il modello Handlebars.js.

Il codice è di sotto.

(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 modello è

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

Il codice sopra funziona bene e la stampa titoli degli articoli. Tuttavia, la mia domanda è

1. Quando si passa al contesto modello Handlebars.js, Attualmente sto facendo $(this.el).html(template(js[0])). È questa la via giusta? Quando faccio solo "js" invece di js [0], l'oggetto JSON ha il comando e la fine di parentesi quadre. Quindi riconosce come oggetto array di oggetto JSON. Quindi ho dovuto js [0]. Ma sento che non è una soluzione adeguata.

2. Quando creo la "vista", la creo come di seguito.

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

Ma nel mio caso, devo fare

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

non dovrei? (Stavo seguendo un tutorial btw). O questo importa? Ho provato entrambi, e non sembrava fare molta differenza.

Grazie in anticipo.

Answer 1

Sembra che si sta creando una vista per una collezione così si dovrebbe inizializzare la visualizzazione utilizzando collection invece di model.

Per quanto manubrio, io non l'ho usato molto, ma penso che si vuole fare qualcosa di simile:

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; 
    } 
    }); 

e quindi usare qualcosa di simile per il modello

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

ps la linea JSON.parse(JSON.stringify(this.model.toJSON())) equivale a this.model.toJSON()

Spero che questo aiuti

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});