Wie Sie verhindern, dass Rückgrat.Marionette aus dem Rendern einer Ansicht, wenn es das Modell noch nicht abgerufen wurde?

In mein Rückgrat.Marionette Anwendung habe ich ein Modell, das erfordert ein Id-Attribut, um es zu konstruieren (url). Ich habe daher das Modell erstellen, indem Sie eine Id, fügen Sie Sie zu einer Ansicht, und Hole dann das Modell:

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

Ich würde erwarten, dass die anzeigen nur starten, Rendern, sobald das Modell geladen wurden, aber die Marionette macht das Modell unmittelbar verursacht mein template Rendern zu scheitern, wie die erwarteten Attribute nicht existieren. Irgendwelche workarounds?

Ich versuche, etwas ähnliches zu tun, um die akzeptierte Antwort hier:
Bindung an ein Backbone-Modell zu einer Marionette ItemView - blocking .fetch()?

Aber während die Werke mit Rückgrat, wie es in der Antwort, Marionette automatisch rendert die Ansicht.

Siehe auch:
Backbone Marionette Anzeige vor der fetch abgeschlossen

Wäre es nicht einfacher, anstatt verzögern die app.content.show() bis nach den abholen? Das wäre für alle Zwecke delay Rendern der Ansicht, bis das Modell abgeholt werden.
Wenn Sie stattdessen möchten, um zu zeigen, irgendeine Art von be-Nachricht, haben Sie einen Blick auf github.com/marionettejs/backbone.marionette/wiki/...

InformationsquelleAutor Rudolf Meijering | 2012-11-26

backbone.js marionette

7

Wenn Sie wirklich wollen, um zu verhindern, dass das Rendern, bis das Modell geladen wurden, sollten Sie ändern Sie die Reihenfolge Aufrufe wie diese:
```
model = new Model({_id:id});
view = new View({model:model});
model.fetch({success: function () {
  app.content.show(view);
});
```
Alternativ sollten Sie sich Gedanken über rendering-sofort und unter Ausnutzung der Marionette ist leer Staatliche Unterstützung.

Ich endete mit etwas, das ähnlich ist, aber ich hatte gehofft, es wurde etwas gebaut, um marionette zu handhaben solchen Fällen. Danke.
Können Sie erklären, mehr über die Marionette, die im leer Staatliche Unterstützung?

InformationsquelleAutor Andrew Hubbs

Beiden Antworten oben arbeiten.

Hier ist noch ein weiterer Weg, die ich lieber verwenden (fühlt sich mehr backboney).

Binden den Blick direkt auf das Modell

Wenn das Modell fertig ist wird geholt, die Funktion, die Sie angeben, werden ausgeführt.
Diese kann getan werden, mit Modellen oder Sammlungen.

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);

Diese ermöglicht Ihnen auch, abrufen, Wann immer Sie wollen.

.show() Anrufe .render() auf der Ansicht, dass seine übergeben, damit dieses Ansatz macht, wenn Sie Sie nennen .show(new View) wieder auf model:sync.

InformationsquelleAutor Jupo

2

basierend auf einer von Derick Bailey Beispiele:
```
 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)     
  });
```
Danke, das ist im Grunde das gleiche wie es im Umgang mit der success-handler Holen, obwohl ich es vorziehen, dass der Weg über diese.
Hi, nicht ganz, einige Male Holen können zurückgegeben werden, bevor der dom gerendert wird ein deferred-Objekt kann hier helfen
Wo deferreds sind wirklich interessant ist, wenn Sie brauchen, um das Rendern einer Ansicht nach mehrere Datenquellen wurden fecthed (siehe davidsulc.com/blog/2013/04/02/...). Daher wird eine latente, auch wenn nur von einer Quelle geholt wird, ermöglicht es Ihnen, halten Ihr code konsistent.
Vielen Dank David, das ist in der Tat ein guter Anwendungsfall zu bevorzugen aufgeschoben ist.

InformationsquelleAutor danikoren

Habe ich recenlty laufen in das gleiche Problem und ließ sich auf ein Muster mit Marionetten-event-system zu lassen, die Aussicht kommunizieren Ihren status vor dem feuern show(). Ich bin auch mit requireJS, die fügt eine zusätzliche Komplexität - aber dieses Muster hilft!

Werde ich einen Ausblick mit ein UI-element, das, wenn geklickt wird, feuert ein event, laden Sie eine neue Ansicht. Dies könnte eine Untersicht oder navview - egal.

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

Dieses Ereignis ist gefangen von der Wreqr 'setHandlers' und löst eine view lade-Reihenfolge (in meinem Fall bin ich dabei ein paar Logik zum behandeln von zustandsübergängen). Der 'start' - Sequenz initialisieren Sie die neue Ansicht und geht in die Optionen.

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

Dann der Blick immer be-Griffe die Kollektionen /Modelle und Holen Sie auf initalize. Die Ansicht hört für Modell /Kollektion verpasst und dann feuert Sie ein neues "ready" - Ereignis verwenden wreqr ist executre Befehl.

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

Habe ich eine andere Prozedur, die Fänge, die ready-Ereignis (und-Optionen, einschließlich der view-opject Referenz) und löst die 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;

Werde ich versuchen zu schreiben, einen anständigen Kern des ganzen Systems und poste hier in der nächsten Woche oder so.

InformationsquelleAutor Chip Lay

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.