Question Charger des données dans une collection Backbone à partir d'un fichier JSON?


J'essaie de charger certaines données dans une collection Backbone à partir d'un fichier JSON local, en utilisant ce code très simple:

  window.Student = Backbone.Model.extend({
  });
  window.Students = Backbone.Collection.extend({
    model: Student, 
  });
  window.AllStudents = new Students();
  AllStudents.fetch({ url: "/init.json"});
  console.log('AllStudents', AllStudents);

Dans la déclaration de la console, AllStudents est vide. Mais init.json est définitivement chargé. Cela ressemble à ceci:

[
  { text: "Amy", grade: 5 },
  { text: "Angeline", grade: 26 },
  { text: "Anna", grade: 55 }    
]

Qu'est-ce que je fais mal?

METTRE À JOUR: J'ai aussi essayé d'ajouter un reset auditeur au dessus du .fetch() appel, mais ça ne tire pas non plus:

AllStudents.bind("reset", function() {
  alert('hello world');
});
AllStudents.fetch({ url: "/init.json"});

Aucune alerte n'apparaît.

MISE À JOUR 2: Essayer ce script (reproduit ici en entier):

$(function(){
  window.Student = Backbone.Model.extend({
  });
  window.Students = Backbone.Collection.extend({
    model: Student, 
  });
  window.AllStudents = new Students();
  AllStudents.url = "/init.json";
  AllStudents.bind('reset', function() { 
      console.log('hello world');  
  }); 
  AllStudents.fetch();
  AllStudents.fetch({ url: "/init.json", success: function() {
      console.log(AllStudents);
  }});
  AllStudents.fetch({ url: "/init.json" }).complete(function() {
      console.log(AllStudents);
  });
});

Une seule déclaration de console apparaît même dans la troisième fetch() appel, et c'est un objet vide.

Je suis maintenant absolument déconcerté. Qu'est-ce que je fais mal?

Le fichier JSON est utilisé en tant qu'application / json, cela n'a donc rien à voir avec cela.


17
2018-02-24 13:37


origine


Réponses:


Les noms d'attribut et les valeurs d'attribut non numériques dans votre fichier JSON doivent être entre guillemets (""). Les guillemets simples ou les guillemets produisent des erreurs et les objets de réponse ne sont pas créés pour créer les modèles et remplir la collection.

Alors. Si vous modifiez le contenu du fichier json pour:

[
  { "text": "Amy", grade: 5 },
  { "text": "Angeline", grade: 26 },
  { "text": "Anna", grade: 55 }    
]

vous devriez voir l'objet de collection non vide.

Vous pouvez modifier votre code pour voir les succès et les échecs suivants:

    AllStudents.fetch({ 
    url: "/init.json", 
    success: function() {
          console.log("JSON file load was successful", AllStudents);
      },
    error: function(){
       console.log('There was some error in loading and processing the JSON file');
    }
  });

Pour plus de détails, ce sera probablement une bonne idée de voir comment les objets de réponse ajax sont créés.


18
2017-08-06 11:46



Les opérations d'E / S en javascript sont presque toujours asynchrones, et il en va de même pour Backbone. Cela signifie que juste parce que AllStudents.fetch est retourné, il n'a pas encore récupéré les données. Donc, quand vous frappez votre console.log déclaration, les ressources n'ont pas encore été récupérées. Vous devriez passer un rappel à fetch:

AllStudents.fetch({ url: "/init.json", success: function() {
    console.log(AllStudents);
}});

Ou éventuellement, utilisez la nouvelle fonctionnalité de promesse dans jQuery (fetch renverra une promesse):

AllStudents.fetch({ url: "/init.json" }).complete(function() {
    console.log(AllStudents);
});

10
2018-02-24 13:47



fetch () renvoie une notification de «succès», comme indiqué précédemment, mais cela signifie simplement que la requête du serveur a réussi. fetch () a ramené un peu de JSON, mais il a encore besoin de l'intégrer dans la collection.

La collection déclenche un événement de réinitialisation lorsque son contenu a été mis à jour. C'est à ce moment que la collection est prête à être utilisée ...

AllStudents.bind('reset', function () { alert('AllStudents bind event fired.'); });

Il semble que vous ayez eu ceci dans votre première mise à jour. La seule chose que j'ai faite différemment était de mettre fetch () devant la liaison de l’événement.


1
2018-06-14 15:22



Je pense que vous devez ajouter {add:true} aux options de fetch,

si vous avez assigné le fetch à une variable, vous obtiendrez également le résultat, mais alors ce n'est pas à l'intérieur de la collection que vous vouliez


0
2018-02-24 13:42