Questions sur Backbone.js avec Handlebars.js

Mon backbone.js app avec Handelbars effectue les opérations suivantes.

  1. configuration d'un modèle de sa collection, la vue et le routeur.
  2. au début, obtenir une liste des articles à partir du serveur et de rendre l'utilisation de la vue via Handlebars.js de modèle.

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

Handlebars.js modèle 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 d'articles. Cependant, ma question est

  1. Lors du passage d'un contexte à Handlebars.js modèle, je suis actuellement en train de faire $(this.el).html(template(js[0])). Est-ce la bonne manière? Quand je fais juste "js" au lieu de js[0], l'objet JSON a de début et de fin des crochets. Par conséquent, il reconnaît comme un tableau d'objet de l'objet JSON. J'ai donc dû js[0]. Mais je sens que ce n'est pas une bonne solution.

  2. Quand j'ai d'abord créer le "Voir", je suis de la création comme ci-dessous.

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

Mais dans mon cas, je dois le

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

Ne devrais-je pas? (J'ai suivi un tutoriel btw). Ou est-ce important? J'ai essayé les deux, et il ne semble pas faire beaucoup de différence.

Merci d'avance.

comment puis-je inclure ce handlebar.js modèle dans mon code html

OriginalL'auteur ericbae | 2011-09-08

  1. 24

    Il semble que vous êtes la création d'une vue pour une collection de sorte que vous devrait initialiser votre point de vue à l'aide de collection au lieu de model.

    Autant que 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 cela pour le modèle

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

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

    Espère que cette aide

    cool. qui en effet ne l'aide.

    OriginalL'auteur timDunham

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

    OriginalL'auteur Kristofer Joseph