Fragen zu Backbone.js mit Lenker.js

Question

Meine Backbone.js -App mit Handelbars macht Folgendes.

1. Richten Sie ein Modell ein, seine Sammlung, Aussicht und Router.
2. Holen Sie sich zu Beginn eine Liste von Artikeln vom Server und rendern Sie sie mithilfe der Ansicht über die Vorlage von Lenker.js.

Der Code ist unten.

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

Lenkerl.js Vorlage ist

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

Der obige Code funktioniert einwandfrei und druckt Artikel -Titel. Meine Frage ist jedoch

1. Wenn ich den Kontext an die Vorlage von Lenker übergeben habe, mache ich gerade $(this.el).html(template(js[0])). Ist das der richtige Weg? Wenn ich nur "JS" anstelle von JS [0] mache, hat das JSON -Objekt führende und endende Quadratklammern. Daher erkennt es als Array -Objekt des JSON -Objekts. Also musste ich JS [0]. Aber ich habe das Gefühl, dass es keine richtige Lösung ist.

2. Wenn ich zum ersten Mal die "Ansicht" erstelle, erstelle ich sie wie unten.

   ws._index = new articlelistView ({Modell: Ws._articles});

Aber in meinem Fall sollte ich tun

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

Sollte ich nicht? (Ich folgte übrigens ein Tutorial). Oder ist das wichtig? Ich habe beide versucht, und es schien nicht viel Unterschied zu machen.

Danke im Voraus.

Answer 1

Es scheint, als würden Sie eine Ansicht für eine Sammlung erstellen, also Sie sollte Initialisieren Sie Ihre Ansicht mithilfe collection Anstatt von model.

Was den Lenker betrifft, ich habe es nicht viel verwendet, aber ich denke, Sie möchten so etwas tun:

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

Und dann so etwas für die Vorlage verwenden

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

ps die LinieJSON.parse(JSON.stringify(this.model.toJSON())) ist äquivalent zu this.model.toJSON()

Hoffe das hilft

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