D'attente pour les modèles à chargement avant le rendu en application Ember.js

J'ai un certain nombre de différentes au niveau de l'application des modèles — à-d., l'utilisateur actuel, compte courant, etc. — que je veux charger avant de rendre mon application. Où et comment faut-il procéder? Cette question/réponse beaucoup aidé, mais il ne couvre pas l'aspect asynchrone.

Le code suivant ce que je veux, mais le chargement des modèles en beforeModel (pour profiter de l'attente pour la promesse de résolution) ne semble pas juste. Même si je dois être le chargement de ces modèles dans ApplicationRoute?

App.ApplicationController = Ember.Controller.extend({
  currentAccount: null
});

App.ApplicationRoute = Ember.Route.extend({
  beforeModel: function () {
    var self = this;

    return App.Account.find(...).then(function (account) {
      self.controllerFor('application').set('currentAccount', account);
    });
  }
});

Merci pour votre aide!

OriginalL'auteur Justin Stayton | 2013-08-07

6

L'astuce est de retour d'une promesse de la route que le modèle de la méthode.

Cela va entraîner le routeur à la transition de l'Application.LoadingRoute route, jusqu'à ce que la promesse est résolu (qui peut être utilisé pour le chargement indication bars/roues etc.)

Lorsque la promesse est résolu, l'Application.LoadingRoute sera désactivée, et l'original de l'itinéraire setupController méthode sera appelée.

Cela fonctionne pour ember-data promesses, JQuery $.ajax promesses et de braise-modèle de l'extraction de promesses.

Juste assurez-vous de retourner le modèle actuel après la résolution de la promesse.

Cela peut également être un bon endroit pour gérer les erreurs si la promesse est rejeté - mais je vais laisser ça à une autre question.

Que pour savoir où vous devez charger vos modèles - qui dépend de votre application utilisation.

Habituellement, vous devez charger un modèle où l'URL indique que vous avez besoin de ce modèle, une règle de pouce serait l'indication d'un modèle d'ID dans l'URL.

Bien sûr, cela change si vous avez besoin pour extraire des données.

Et maintenant un peu de code:
```
App.SomeRoute = Ember.Route.extend({
   model: function(params){
       return App.SomeModel.fetch(params.model_id).then(function(modelData){
           //it is better to return the actual model here, and not the promise itself
           return App.SomeModel.find(params.model_id);
       });

   },
   setupController: function(controller, model){
       controller.set("model", model);
       //do some controller setup here - can be omitted if no setup is needed
       //this will run only after the promise has been resolved.
   }
});

App.LoadingRoute = Ember.Route.extend({
        activate: function(){
            this._super();
            //add some loading indication here
        },
        deactivate: function(){
            this._super();
            //remove loading indication
        }
}
```
Espère que cette aide.

Merci, mais vous n'avez pas vraiment de réponse où je devrais charge au niveau de l'application des modèles que j'ai besoin d'un peu partout. En d'autres termes, les modèles qui ne sont pas dépendantes de l'URL.
si vous en avez besoin à l'avance, vous pouvez utiliser la Braise.Application de la méthode init
Je n'arrive pas à trouver une quelconque indication qu'il attend une promesse à résoudre. Pouvez-vous expliquer plus en détail? Merci.
Lorsque vous revenez d'une promesse de la méthode de modèle d'un itinéraire, le routeur temporairement la transition vers LoadingRoute (vous devez définir un joli LoadingRoute un coup de chargement roue ou quelque chose comme ça), jusqu'à ce que la promesse est résolu. Lorsque la promesse est résolu, il va revenir à votre itinéraire et exécuter le setupController comme prévu. vous pouvez trouver un exemple ici: jsbin.com/axarop/47/edit et certains de référence ici: gist.github.com/machty/5723945

OriginalL'auteur Meori Oransky

Vous voulez de précharger des données/modèles pour initialiser votre application, et de se sentir beforeModel est incorrect?

Sonne comme vous avez besoin d'une application initialiseur!

Votre ami dans cette instance:

App.deferReadiness(); //arrêter le progrès de l'application jusqu'à ce que toutes les instances de cet appel (ie: plusieurs initialiseurs) sont compensées par une instance l'appel suivant:

App.advanceReadiness(); //considérons que c'est l'équivalent d'une promesse de résoudre appel.

1) De vous regardant directement l'utilisateur, la modification d'où mentionnés à adapter à votre configuration de l'application:

Ember.Application.initializer({
    name: 'loadUser',
    after: 'store',
    initialize: function(container, app) {
        //modify this following to suit how you're determining the account
        var url = 'user/' + currentAccount;
        //tell the app to pause loading until advanceReadiness is declared
        app.deferReadiness();

        //load from JSON 
        Ember.$.getJSON('url').then(function(json) {

            var store = container.lookup('store:main');
            store.load(app.User, json);

            //tell app to start progressing again
            app.advanceReadiness();
        });
    }
});

2) Par l'intermédiaire de la balise meta:

Ember.Application.initializer({
    name: 'currentUser'
    after: 'store',

    initialize: function(container, app) {
        app.deferReadiness();

        $(function() {
            //Look up an attribute in a meta tag
            var store      = container.lookup('store:main'),
                attributes = $('meta[name="current-user"]').attr('content');

            if (attributes) {
                var obj        = store.load(app.User, JSON.parse(attributes)),
                    user       = App.User.find(obj.id),
                    controller = container.lookup('controller:currentUser').set('content', user);

                container.typeInjection('controller', 'currentUser', 'controller:currentUser');
            }
            app.advanceReadiness();
        });
    }
});

3) à Travers les données de Session:

Ember.Application.initializer({
    name  : 'currentUser',
    after : 'session',
    initialize: function(container, app) {
        var controller = container.lookup('controller:currentUser');
        container.typeInjection('controller', 'currentUser', 'controller:currentUser');
    }
});

OriginalL'auteur greg.arnott

J'ai réussi à obtenir ce travail en utilisant des Promesses et de l'afterModel méthode dans le ApplicationRoute.

App.ApplicationRoute = Ember.Route.extend({

    model: function() {

        //load the reservation (a globally needed model)
        return App.Reservation.fetch().then(function(reservations) {
            return reservations.get('firstObject');
        });

    },

    afterModel: function() {

        //Load all other globally needed models
        var self = this;
        return App.Gender.fetch().then(function(genders) {
            self.controllerFor('application').set('genders', genders);
            return App.FilterAttribute.fetch().then(function(filterAttributes) {
                self.controllerFor('application').set('filterAttributes', filterAttributes);
                //return App.SomeOtherModel...
            });
        });

    },

    setupController: function(controller, model) {
        controller.set('reservation', model);
    }

});

Fonctionne parfaitement 🙂 La demande reste dans le LoadingRoute jusqu'à ce que tous les enregistrements sont chargés.
Notez que je suis en utilisant Braise Modèle, mais cela ne devrait pas faire de différence, il suffit de le retourner une Promesse.

OriginalL'auteur Alex

Vous devez vous connecter pour publier un commentaire.