Débogage Backbone.js: le rendu après la collecte fetch()

Je suis en train de faire à base de render() après le fetch() de la collection (épine Dorsale 0.9.2):

var ProjectListView = Backbone.View.extend({
        el: $('#container'),
        initialize: function () {
            this.collection = new ProjectsCollection();
            this.collection.bind("change", _.bind(this.render, this));
            this.collection.fetch({ success: function () { console.log("collection fetched"); } });
            ...
             }, 
        render: function () {
            console.log("rendered");
            ...

La création de la nouvelle instance de Vue imprime:

    collection fetched

De sorte que le render() n'est jamais appelée après fetch(). Ce que je fais mal? Il n'y a pas d'exceptions présent.

Des conseils comment déboguer ce genre de choses de la colonne vertébrale?

Ps.
Il semble que cette fonction est mal documentée, compte tenu du nombre de questions sur.

OriginalL'auteur Fdr | 2012-11-27

  1. 29

    De la beaux-manuel:

    chercher collection.fetch([options])

    Chercher de l'ensemble par défaut des modèles de cette collection à partir du serveur, la réinitialisation de la collection quand ils arrivent. [...] Lorsque le modèle de données de retours à partir du serveur, la collection sera réinitialisé.

    Et ce qui ne reset faire? reset fait ceci:

    réinitialiser collection.reset(models, [options])

    [ ... ] Réinitialiser pour remplacer une collection avec une nouvelle liste de modèles (ou attribut de hachages), déclenchant un seul "reset" événement à la fin.

    Donc fetch appels reset pour mettre à jour la collection de modèles et de reset déclenche une "reset" événement, pas un "change" événement. Aucun de ces modèles ont changé et une collection "change" événements à venir à partir de ses modèles.

    Vous devriez avoir render lié à "reset":

    initialize: function () {
    this.collection = new ProjectsCollection();
    this.collection.bind("reset", _.bind(this.render, this));
    this.collection.fetch(...);
}

    Si vous voulez écouter "change" événements sur le contenu des modèles, puis vous pouvez lier une "change" gestionnaire de la collection depuis:

    Vous pouvez lier "change" événements pour être averti lorsqu'un modèle de la collection a été modifiée,

    [...]

    Tout événement qui est déclenché sur un modèle dans une collection sera également déclenchée sur la collecte directement, pour des raisons de commodité.

    La collection sera également générer "add" et "remove" des événements que la collection elle-même des modifications.

    Des versions plus récentes de colonne vertébrale n'est plus de réinitialisation de collections pendant fetch:

    Lorsque le modèle de données de retours à partir du serveur, il utilise ensemble (intelligemment) de fusion extraites des modèles, à moins que vous passiez {reset: true}, auquel cas la collection sera (efficacement) réinitialiser.

    Et set:

    [...] effectue un "smart" mise à jour de la collection avec la liste des modèles. Si un modèle dans la liste n'est pas encore dans la collection, il sera ajouté; si le modèle est déjà dans la collection de ses attributs seront fusionnés, et si la collection contient des modèles qui ne sont pas présents dans la liste, ils seront supprimés. Toutes les "add", "remove", et "change" les événements sont déclenchés que cela arrive,

    Donc, avec des versions plus récentes de l'épine Dorsale, vous aurez envie de liste pour le "add", "remove", et "change" événements (dont une collection basée vue doit être à l'écoute de toute façon); vous pouvez également utiliser {reset: true} sur la première fetch et écouter "reset". Je vous recommande l'approche suivante pour la collecte des vues basées sur les:

    1. Écouter "add" et gérer cet événement avec un rappel qui ajoute simplement un élément de la vue, de ne pas tout jeter et de re-rendre.
    2. Écouter "remvoe" et gérer cet événement avec un rappel qui ne supprime que les nouvellement sorti le modèle.
    3. Écouter "change" et poignée avec un rappel qui remplace (ou mise à jour) l'élément approprié.
    4. Écouter "reset" et lier de render. Puis passer {reset: true} à la collecte initiale de fetch appel.

    Qui piège les événements importants et de la collection qui va faire la quantité minimale de travail à traiter chacun. Bien sûr, cette stratégie n'est pas applicable à toutes les situations, mais je pense que c'est un bon point de départ.

    Merci à une bonne réponse, j'espère que cela sera utile à d'autres. PS. Existe-il d'autres ressources que vous pourriez recommander en plus de l'officiel docs?
    J'ai lu la documentation et le code source de référence. Et après+ de 15 ans, tous les cadres de chercher à peu près la même.
    Je pense que oui. Ces événements de la colonne vertébrale sont des bits de déclenchement: "reset" se pose pour les collections, mais il n'y a pas de similitude quand faire modèle.fetch() (ce qui provoque un "changement" à émettre). La faiblesse de la conception d'api?
    Mais alors, comment voulez-vous faire la différence entre un changement à la collecte et à un changement sur l'un de ces modèles? Donc d'ajouter, de supprimer. Et de réinitialiser les événements. Votre point de vue/modèles devraient être en mesure de gérer vide de modèles de sorte qu'une modification de l'événement devrait être suffisant, vous pouvez patch dans un extraites de l'événement si nécessaire par des raisons impérieuses fetch.
    Mon point est que, lorsque les noms sont identiques, alors on s'attendre à un même type de comportement. Si le comportement diffère donc devrait noms: dans le cas du modèle.fecth() pour mieux nommer serait le modèle.load() ou d'un modèle.mise à jour()

    OriginalL'auteur mu is too short

  2. 8

    Ce qui a changé dans 1.0

    http://backbonejs.org/#changelog

    "Si vous souhaitez continuer à utiliser le "reset", pass {reset: true}."

    OriginalL'auteur Dane Macaulay

  3. 3

    Ok, donc, jusqu'à ce que l'on peut expliquer pourquoi la liaison ne fonctionne pas, j'ai utilisé la solution de contournement suivante:

       initialize: function () {
            var self = this;
            this.collection = new ProjectsCollection();
            this.collection.fetch({ success: function () { self.render(); } });

    OriginalL'auteur Fdr