web-dev-qa-db-de.com

Backbone.js: Eine Sammlung von Modellen abrufen und rendern

Ich lerne die JavaScript MVC-Anwendungsentwicklung mit Backbone.js und habe Probleme beim Rendern der Modellsammlung in der Ansicht. Folgendes möchte ich tun:

  • Ruft nach Abschluss des Ladevorgangs der Seite Daten vom Server als Modellsammlung ab

  • Rendern Sie sie in der Ansicht

Das ist alles was ich tun möchte und hier ist was ich bisher habe:

$(function(){

    "use strict";

    var PostModel = Backbone.Model.extend({});

    var PostCollection = Backbone.Collection.extend({
        model: PostModel,
        url: 'post_action.php'
    });

    var PostView = Backbone.View.extend({
        el: "#posts-editor",        

        initialize: function(){
            this.template = _.template($("#ptpl").html());
            this.collection.fetch({data:{fetch:true, type:"post", page:1}});
            this.collection.bind('reset', this.render, this);
        },

        render: function(){
            var renderedContent = this.collection.toJSON();
            console.log(renderedContent);
            $(this.el).html(renderedContent);
            return this;
        }
    });

    var postList = new PostCollection();
    postList.reset();
    var postView = new PostView({
        collection: postList
    });

});

Problem

Soweit ich weiß, protokolliert Chrome die Antwort vom Server und es ist im JSON-Format, wie ich es möchte. Aber es rendert aus meiner Sicht nicht. Es gibt keine offensichtlichen Fehler in der Konsole.

Der Server verfügt über einen Handler, der GET-Parameter akzeptiert und einige JSON-Meldungen ausgibt: http://localhost/blog/post_action.php?fetch=true&type=post&page=1

[
   {
      "username":"admin",
      "id":"2",
      "title":"Second",
      "commentable":"0",
      "body":"This is the second post."
   },
   {
      "username":"admin",
      "id":"1",
      "title":"Welcome!",
      "commentable":"1",
      "body":"Hello there! welcome to my blog."
   }
]
14
hyde

Es gibt 2 mögliche Probleme mit Ihrem Code.

  1. Der Ereignislistener-Rückruf sollte registriert werden vor dem Aufrufen der collection.fetch(). Andernfalls verpassen Sie möglicherweise das erste reset -Ereignis, da es möglicherweise ausgelöst wird, bevor der Listener registriert wird.

  2. Das Ereignis reset reicht nicht aus, um sicherzustellen, dass die Ansicht bei jeder Aktualisierung der Sammlung neu gerendert wird.

Beachten Sie außerdem, dass es empfehlenswert ist, das Formular object.listenTo() zum Binden von Ereignissen zu verwenden, da hierdurch die ordnungsgemäße Aufhebung der Registrierung sichergestellt wird, wenn die Ansicht geschlossen wird. Andernfalls könnten Sie mit dem enden, was als Backbone-Zombies bekannt ist. Hier ist eine Lösung.

this.listenTo( this.collection, 'reset add change remove', this.render, this );
this.collection.fetch({ data: { fetch:true, type:"post", page:1 } });

Beachten Sie, wie Sie mehrere Ereignisse von demselben Objekt registrieren können, indem Sie sie durch Leerzeichen trennen.

10
mor

veränderung

this.collection.bind('reset', this.render, this);

zu

this.collection.bind('sync', this.render, this);

Das Problem ist, dass Sie das Zurücksetzen am Anfang nur einmal durchführen. Und zu diesem Zeitpunkt haben Sie nichts zu rendern. Das nächste Mal, wenn Sie Ihre Sammlung abrufen, wird das Reset-Ereignis nicht ausgelöst, da Sie die Sammlung ohne die Option {reset: true} abrufen.

2
Artem Volkhin

Ändern Sie diese Zeile

this.collection.bind('reset', this.render, this);

zu

this.listenTo(this.collection, 'reset', this.render);
1
Sushanth --

Beim Abrufen Ihrer Sammlung wird das Reset-Ereignis nicht mehr standardmäßig ausgelöst. (Ich glaube seit Version 1.0) Damit Backbone das Reset-Ereignis auslöst, wenn die Sammlung abgerufen wurde, müssen Sie die Abrufmethode folgendermaßen aufrufen:

this.collection.fetch({reset: true});
0
Rogier