Comment prévenir la colonne vertébrale.Marionnettes du rendu d'une vue si c'est le modèle n'a pas été récupérée?

Dans ma colonne vertébrale.Marionnette de l'application j'ai un Modèle qui nécessite un attribut Id pour la construction de l'url. J'ai donc créer le modèle en lui passant un Id, l'ajouter à vue, puis extraire le modèle:

   model = new Model({_id:id})               
   view = new View({model:model})                               
   app.content.show(view)                                                    
   model.fetch()

Je m'attends à la vue de ne commencer le rendu une fois que le modèle a été récupéré, mais la Marionnette rend le modèle immédiatement la cause de mes modèle de rendu à l'échec comme les attributs attendus n'existent pas. Aucune solution de contournement?

Je suis en train de faire quelque chose de similaire à la accepté de réponse ici:
La liaison d'une épine Dorsale de Modèle à une Marionnette ItemView de blocage .fetch()?

Mais tout qui fonctionne avec la colonne vertébrale, comme indiqué dans la réponse, de Marionnettes rend automatiquement la vue.

Voir aussi:
Épine dorsale de la Marionnette de l'Affichage avant de chercher complète

  • Ne serait-il pas plus facile, au lieu de retarder le app.content.show() jusqu'après le fetch? Qui serait à toutes fins retarder le rendu de la vue jusqu'le modèle est récupéré.
  • Si, au contraire, vous souhaitez montrer une sorte de message de chargement, jetez un oeil à github.com/marionettejs/backbone.marionette/wiki/...
InformationsquelleAutor Rudolf Meijering | 2012-11-26
  1. 7

    Si vous voulez vraiment éviter de rendu jusqu'à ce que le modèle a été téléchargée, vous devez modifier l'ordre de vos appels, comme ceci:

    model = new Model({_id:id});
view = new View({model:model});
model.fetch({success: function () {
  app.content.show(view);
});

    Sinon, vous devriez penser à rendu immédiatement et de prendre avantage de la Marionnette de la vierge de soutien de l'état.

    • J'ai fini par utiliser quelque chose de similaire, mais j'espérais qu'il y a quelque chose de construit dans de marionnette à gérer de tels cas. Merci.
    • Pouvez-vous expliquer plus sur la Marionnette du vide le soutien de l'état?
    InformationsquelleAutor Andrew Hubbs
  2. 10

    Les deux réponses ci-dessus.

    Voici encore une autre façon que je préfère utiliser (se sent plus backboney).

    Lier la vue directement sur le modèle

    Lorsque le modèle est fait récupérée, la fonction que vous spécifiez s'exécuter.
    Cela peut être fait avec des modèles ou collections.

    var Model = Backbone.Model.extend({});
var model = new Model();
model.fetch();

var View = Marionette.ItemView.extend({
    model:model,
    initialize: function(){
        this.model.bind("sync", this.render, this);//this.render can be replaced
    }                                              //with your own function
});                               

app.region.show(new View);

    Cela vous permet également de récupérer quand vous le souhaitez.

    • .show() appels .render() sur le point de vue que son passé si cette approche rend une fois lorsque vous appelez .show(new View) et de nouveau sur model:sync.
    InformationsquelleAutor Jupo
  3. 2

    basé sur l'un des Derick Bailey exemples:

     model = new Model({_id:id})               
   var fetched = model.fetch();

  //wait for the model to be fetched
  $.when(fetched).then(function(){

     view = new View({model:model})                               
     app.content.show(view)     
  });
    • Merci, c'est essentiellement la même que la manipulation dans le gestionnaire de succès de fetch, bien que je préfère de cette façon au-dessus de cette.
    • Salut, pas exactement, quelques fois fetch peuvent retourner avant le dom est rendu différé objet peut aider ici
    • Où deferreds sont vraiment intéressant, c'est quand vous avez besoin de rendre une vue après plusieurs sources de données ont été fecthed (voir davidsulc.com/blog/2013/04/02/...). Donc à l'aide d'un différé de même lorsqu'une seule source est récupérée vous permet de garder votre code cohérent.
    • Merci David, c'est en effet un bon cas d'utilisation à préférer reportés de l'.
    InformationsquelleAutor danikoren
  4. 1

    J'ai recenlty exécuter dans le même problème et l'a réglé sur une tendance à utiliser des Marionnettes du système d'événements de laisser les points de vue de communiquer leur statut avant la cuisson show(). Je suis aussi à l'aide de requireJS qui ajoute une complexité supplémentaire - mais ce schéma permet de!

    Je vais avoir une vue avec un élément de l'INTERFACE utilisateur lorsque l'utilisateur clique dessus, déclenche un événement pour charger un nouveau point de vue. Cela pourrait être une sous-vue ou un navview - n'a pas d'importance. 

    App.execute('loadmodule:start', { module: 'home', transition: 'left', someOption: 'foo' });

    Cet événement est capturé par les Wreqr 'setHandlers" et déclenche une vue sur la séquence de chargement (dans mon cas, je suis en train de faire un tas de logique pour gérer les transitions d'état). Le 'start' de la séquence inits le nouveau point de vue et passe dans les options nécessaires. 

    var self = this;
App.commands.setHandlers({'loadmodule:start': function( options ) { self.start( options );

    Puis la vue de l'obtention de chargement gère les collections de modèles et de récupération sur initalize. La vue est à l'écoute de modèle /de la collection de changements et puis lance un nouveau "prêt" de l'événement à l'aide de wreqr de executre de commande. 

    this.listenTo( this.model, 'change', function(){
    App.execute('loadmodule:ready', { view: this, options: this.options });
});

    J'ai un autre gestionnaire qui attrape l'événement ready (et les options, y compris le point de vue opject de référence) et déclenche le show().

    ready: function( options ) {
//catch a 'loadmodule:ready' event before proceeding with the render /transition - add loader here as well
var self = this;
var module = options.options.module;
var view = options.view;
var transition = options.options.transition;
var type = options.options.type;
if (type === 'replace') {
self.pushView(view, module, transition, true);
} else if (type === 'add') {
self.pushView(view, module, transition);
} else if (type === 'reveal') {
self.pushView(view, module, transition, true);
}   
},
pushView: function(view, module, transition, clearStack) {
var currentView = _.last(this.subViews);
var nextView = App.main.currentView[module];
var self = this;
var windowheight = $(window).height()+'px';
var windowwidth = $(window).width()+'px';
var speed = 400;
switch(transition) {
case 'left':
nextView.show( view );
nextView.$el.css({width:windowwidth,left:windowwidth});
currentView.$el.css({position:'absolute',width:windowwidth,left:'0px'});
nextView.$el.animate({translate: '-'+windowwidth+',0px'}, speed, RF.Easing.quickO);
currentView.$el.animate({translate: '-'+windowwidth+',0px'}, speed, RF.Easing.quickO, function(){
if (clearStack) {
_.each(_.initial(self.subViews), function( view ){
view.close();
});
self.subViews.length = 0;
self.subViews.push(nextView);
}
});
break;

    Je vais essayer d'écrire un décent essentiel de l'ensemble du système et de poster ici à la semaine prochaine.

    InformationsquelleAutor Chip Lay