Fragen auf Backbone.js mit Handlebars.js

Meine backbone.js app mit Handelbars hat die folgenden.

  1. setup-ein Modell, seine Sammlung, anzeigen und router.
  2. 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

  1. 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.

  2. 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
InformationsquelleAutor ericbae | 2011-09-08
Schreibe einen Kommentar