Inizializzare un plugin jQuery quando il contenuto di un Ember.View ha caricato

Question

DEBUG: Ember.VERSION : 1.0.0-rc.6 ember.js 
DEBUG: Handlebars.VERSION : 1.0.0-rc.4 ember.js 
DEBUG: jQuery.VERSION : 1.9.1 

Il controllore è un Ember.ArrayContoller & il contenuto viene caricato tramite il DS.RESTAdapter.

Questo è il codice che penso di volere, ma non viene mai eseguito. Voglio aggiungere un osservatore a controller.content per l'evento isLoaded.

App.ThumbnailScrollerView = Ember.View.extend({ 
    tagName: "div", 
    didInsertElement: function() { 
    return this.get("controller.content").addObserver("isLoaded", function() { 
     return $(".jThumbnailScroller").thumbnailScroller(); 
    }); 
    } 
}); 

Questo codice viene eseguito, ma una volta per ogni oggetto, lo voglio solo per l'ultimo oggetto. controller.content.@each

App.ThumbnailScrollerView = Ember.View.extend({ 
    tagName: "div", 
    didInsertElement: function() { 
    return this.get("controller.content.@each").addObserver("isLoaded", function() { 
     return $(".jThumbnailScroller").thumbnailScroller(); 
    }); 
    } 
}); 

Anche questo non viene mai eseguito. controller.content.lastObject

App.ThumbnailScrollerView = Ember.View.extend({ 
    tagName: "div", 
    didInsertElement: function() { 
    return this.get("controller.content.lastObject").addObserver("isLoaded", function() { 
     return $(".jThumbnailScroller").thumbnailScroller(); 
    }); 
    } 
}); 

Answer 1

Credo che controller.content sia un array ManyArray e ManyArrays non implementato isLoaded. Hanno una proprietà isUpdating.

Template:

{{#if content.isUpdating}} 
    LOADING... 
{{else}} 
    {{view App.ThumbnailScrollerView}} 
{{/if}} 

App.ThumbnailScrollerView:

setupThumbnailScroller: function() { 
    this.$('.jThumbnailScroller').thumbnailScroller(); 
}.on('didInsertElement') 

Answer 2

Dal momento che si sta utilizzando il RESTAdapter per il momento in Ember arriva alla vista/modello è già troppo tardi per osservare isLoaded. Questo è di progettazione e un'idea chiave dietro il router Async in RC.6.

L'utilizzo dello RESTAdapter comporterà una restituzione nel gancio model quando si recuperano i dati dal server. Il flusso di lavoro del router è qualcosa di simile,

1. model gancio guarda in alto i dati tramite MyModel.find ecc, e restituisce una promessa.
2. Il router asincrono si interrompe quando vede la promessa e attende il completamento del recupero.
3. Quindi il router chiama setupController e collega i dati restituiti al controller.
4. Infine, il renderTemplate viene chiamato per il rendering del modello con questi dati.

Quindi, quando la vista esegue il rendering, i dati hanno completato il caricamento. Il @each è per una proprietà calcolata che itera sul contenuto e non è rilevante qui.

Ora, se la mia comprensione della domanda è corretta. Si dispone di un contenuto che viene caricato tramite il gancio del modello e scrive il DOM che lo prevede nel modello corrispondente.

Al termine del caricamento di queste immagini, è necessario chiamare lo thumnailScroller() sul div target, che inizializzerà questo plug-in.

es .: - Si desidera agganciare un evento quando tutte le immagini sono caricate e non quando i dati di backup del contenuto vengono caricati.

Ember non fornisce alcun evento di questo tipo per il caricamento dell'immagine. Per fare ciò è necessario utilizzare una libreria esterna come imagesLoaded.

imagesLoaded fornisce richiamate per eventi come always e done per guardare tali eventi di completamento dell'immagine. Il tuo metodo didInsertElement per questo sarebbe,

didInsertElement: function() { 
    var _this = this; 
    var loader = imagesLoaded('.jThumbnailScroller'); 

    loader.on('always', function() { 
    _this.$('.loader').hide(); 
    _this.$('.jThumbnailScroller').thumbnailScroller(); 
    }); 

    loader.on('progress', function(loader, image) { 
    _this.set('nowLoading', image.img.src); 
    }); 
} 

Ecco un esempio jsbin.Utilizza le promesse di jQuery con l'API di Flickr, ma gli stessi principi si applicano con RESTAdapter di ember-data.