Questions sur Backbone.js avec Handlebars.js

Question

Mon Backbone.js application avec ce qui suit fait du guidon.

1. configurer un modèle, sa collection, vue et routeur.
2. au début, obtenir une liste des articles du serveur et de le rendre en utilisant la vue par modèle Handlebars.js.

Le code est ci-dessous.

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

modèle Handlebars.js est

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

Le code ci-dessus fonctionne très bien et il imprime les titres des articles. Cependant, ma question est

1. Lors du passage contexte modèle Handlebars.js, je suis en train de faire $(this.el).html(template(js[0])). Est-ce la bonne façon? Quand je fais seulement « js » au lieu de js [0], l'objet JSON a conduit et se terminant entre crochets. Par conséquent, il reconnaît comme un objet de tableau d'objet JSON. Donc, je devais js [0]. Mais je me sens comme ce n'est pas une bonne solution.

2. Quand je crée le "View", je crée comme ci-dessous.

   ws._index = new ArticleListView ({modèle: ws._articles});

Mais dans mon cas, je dois faire

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

pas moi? (Je suivais un cours d'instruction BTW). Ou est-ce important? J'ai essayé à la fois, et il ne semble pas faire beaucoup de différence.

Merci à l'avance.

Answer 1

Il semble que vous créez une vue pour une collection afin que vous devrait initialiser votre point de vue à l'aide collection au lieu de model.

En ce qui concerne le guidon, je ne l'ai pas utilisé beaucoup, mais je pense que vous voulez faire quelque chose comme ceci:

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

et ensuite utiliser quelque chose comme ça pour le modèle

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

p.s. la ligne JSON.parse(JSON.stringify(this.model.toJSON())) est équivalente à this.model.toJSON()

Hope this helps

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