web-dev-qa-db-fra.com

comment fonctionne la méthode d'extraction du modèle backbone.js

je suis très confus quant à l'utilisation de la méthode de récupération de modèle backbone.js. Voir l'exemple suivant
routeur de dorsale:

profile: function(id) {
  var model = new Account({id:id});
  console.log("<---------profile router-------->");
  this.changeView(new ProfileView({model:model}));
  model.fetch();
}

la première étape, le modèle de compte sera instancié, le modèle de compte ressemble à ceci.

define(['models/StatusCollection'], function(StatusCollection) {
  var Account = Backbone.Model.extend({
    urlRoot: '/accounts',

    initialize: function() {
      this.status       = new StatusCollection();
      this.status.url   = '/accounts/' + this.id + '/status';
      this.activity     = new StatusCollection();
      this.activity.url = '/accounts/' + this.id + '/activity';
    }
  });

  return Account;
});

la propriété urlRoot pour quoi s'agit-il? Une fois l'objet modèle créé, la vue de profil sera rendue avec ceci this.changeView (nouveau ProfileView ({modèle: modèle}));, la fonction changeview ressemble à ceci.

changeView: function(view) {
  if ( null != this.currentView ) {
    this.currentView.undelegateEvents();
  }
  this.currentView = view;
  this.currentView.render();
},

après la vue de rendu, les informations de profil ne s'afficheront pas encore, mais après l'exécution de l'instruction model.fetch ();, les données du modèle seront affichées, pourquoi? Je ne sais vraiment pas comment fonctionne fetch, j'essaie de le découvrir, mais aucune chance.

backbone.jsmodel
19
zero_coding

Je ne sais pas exactement quelle est votre question, mais je ferai de mon mieux pour expliquer ce que je peux.

Le concept derrière l'urlRoot est que ce serait l'URL de base et les éléments enfants seraient récupérés en dessous avec l'identifiant ajouté à cet urlRoot.

Par exemple, le code suivant:

var Account = Backbone.Model.extend({
    urlRoot: '/accounts'
});

définira l'URL de base. Ensuite, si vous instanciez ceci et appelez fetch ():

var anAccount = new Account({id: 'abcd1234'});
anAccount.fetch();

il ferait la demande suivante:

GET /accounts/abcd1234

Dans votre cas, vous définissez l'urlRoot, puis définissez explicitement une URL afin que l'urlRoot que vous fournissez soit ignoré.

Je vous encourage à regarder la source Backbone (c'est étonnamment succinct) pour voir comment l'url est dérivée: http://backbonejs.org/docs/backbone.html#section-65

Pour répondre à votre autre question, la raison pour laquelle les informations de votre profil ne s'afficheront pas immédiatement est que fetch () va sur le réseau, va sur votre serveur et doit attendre une réponse avant de pouvoir être affichée.

Ce n'est pas instantané.

Cela se fait de manière non bloquante, ce qui signifie qu'il fera la demande, continuera à faire ce qu'il fait, et lorsque la demande revient du serveur, il déclenche un événement que Backbone utilise pour s'assurer que tout ce qui devait être fait, maintenant que vous avez les données du modèle, c'est fait.

J'ai mis quelques commentaires dans votre extrait de code pour expliquer ce qui se passe ici:

profile: function(id) {
  // You are instantiating a model, giving it the id passed to it as an argument
  var model = new Account({id:id});
  console.log("<---------profile router-------->");

  // You are instantiating a new view with a fresh model, but its data has 
  // not yet been fetched so the view will not display properly
  this.changeView(new ProfileView({model:model}));

  // You are fetching the data here. It will be a little while while the request goes
  // from your browser, over the network, hits the server, gets the response. After
  // getting the response, this will fire a 'sync' event which your view can use to
  // re-render now that your model has its data.
  model.fetch();
}

Donc, si vous voulez vous assurer que votre vue est mise à jour après la récupération du modèle, vous pouvez procéder de plusieurs manières: (1) passez un rappel réussi à model.fetch () (2) enregistrez un gestionnaire sur vos vues pour l'événement 'sync', restitue la vue quand elle revient (3) place le code pour instancier votre vue dans un rappel réussi, de cette façon la vue ne sera créée qu'après le retour de la demande réseau et votre modèle aura ses données .

43
Victor Quinn