Domande su backbone.js con manubrios.js

Question

La mia app backbone.js con Handelbars fa quanto segue.

1. Imposta un modello, la sua raccolta, vista e router.
2. All'inizio, ottieni un elenco di articoli dal server e renderlo utilizzando la vista tramite il modello di manubrio.js.

Il codice è di seguito.

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

Il modello di manubrios.js è

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

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

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

2. Quando creo per la prima volta la "vista", la sto creando come di seguito.

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

Ma nel mio caso, dovrei farlo

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

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

Grazie in anticipo.

Answer 1

Sembra che tu stia creando una vista per una raccolta in modo da te dovrebbe Inizializza la tua vista usando collection invece di model.

Per quanto riguarda il manubrio, non l'ho usato molto, ma penso che tu voglia fare qualcosa del genere:

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 poi usa qualcosa di simile per il modello

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

PS la lineaJSON.parse(JSON.stringify(this.model.toJSON())) è equivalente a this.model.toJSON()

Spero che sia di aiuto

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