Fragen auf Backbone.js mit Handlebars.js
Meine backbone.js app mit Handelbars hat die folgenden.
- setup-ein Modell, seine Sammlung, anzeigen und router.
- am start, erhalten Sie eine Liste von Artikeln aus dem server-und render es mit dem Blick über Handlebars.js -Vorlage.
Den code unten ist.
(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 Vorlage ist
<script id="articles_hb" type="text/x-handlebars-template">
{{#articles}}
{{title}}
{{/articles}}
</script>
Den oben genannten code funktioniert gut und druckt Artikel-Titel. Aber meine Frage ist
-
Bei der übergabe Kontext Handlebars.js Vorlage, ich bin derzeit dabei
$(this.el).html(template(js[0]))
. Ist das der richtige Weg? Wenn ich nur "js" anstelle von js[0], das JSON-Objekt hat führende und endet mit eckigen Klammern. Damit es erkennt, wie ein array-Objekt mit JSON-Objekt. So musste ich js[0]. Aber ich fühle mich wie es nicht die eine richtige Lösung. -
Wenn ich zuerst erstellen Sie die "" Ansicht "" ich Schaffe es wie folgt Aussehen.
ws._index = new ArticleListView({model: ws._articles});
Aber in meinem Fall, das ich tun sollte,
ws._index = new ArticleListView({collection: ws._articles});
Sollte ich nicht? (Ich war nach einem tutorial btw). Oder spielt das eine Rolle? Ich versuchte beides, und es schien keinen zu großen Unterschied machen.
Vielen Dank im Voraus.
- wie kann ich diese handlebar.js in meine html-Vorlage
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es scheint, dass Sie erstellen Sie eine Ansicht für eine Sammlung, so dass Sie sollte initialisieren Sie Ihre Ansicht mit
collection
stattmodel
.So weit wie LENKER, ich habe nicht verwendet es eine Menge, aber ich denke, Sie wollen etwas tun, wie dieses:
und dann verwenden Sie so etwas wie dies für die Vorlage
p.s. die Zeile
JSON.parse(JSON.stringify(this.model.toJSON()))
entsprichtthis.model.toJSON()
Hoffe, das hilft
/////////////////////////////////////