Ember.js con Socket.io

Sto provando ad impiantare una semplice applicazione Ember all’interno della vista dell’applicazione del mio nodo. So che Ember è configurato e che i miei socket funzionano correttamente, ora l’unico problema è che i dati non vengono restituiti apparentemente anche se vengono recuperati.

Ecco cosa ho:

App = Ember.Application.create({ rootElement: '#ember' }); App.Router.map(function() { // put your routes here }); App.IndexRoute = Ember.Route.extend({ model: function() { async.waterfall([ function (callback) { socket.emit('getUserList', { data: null }); callback(null, ''); }, function (res, callback) { var userList = new Array(); socket.on('recieveUserList', function (data) { for(var i=0; i<data.userList.length; i++) { userList.push(data.userList[i].name); } }); callback(null, userList); } ], function (err, result) { return result; }); } }); 

Ora se console.log(results) ritorno [‘John Smith’, ‘Jane Doe’] ma non viene stampato sulla mia pagina con:

  
    {{#each item in model}}
  • {{item}}
  • {{/each}}

Dal guardare gli esempi dovrebbe funzionare, giusto?

EDIT Ecco il violino http://jsfiddle.net/UJ4Su/

Riparando il tuo violino

Secondo te, prova questo:

  

(Nota il riferimento esplicito alla route dell’indice per questo modello)

Ecco una versione aggiornata del tuo violino che funziona:

ESEMPIO: http://jsfiddle.net/UJ4Su/13/

Nota che questo esempio non funzionerà con i tuoi socket perché non stai restituendo una promise. Dato che si restituisce un array normale (tecnicamente non si restituisce nulla poiché non si dispone di una chiamata di ritorno al di fuori della chiamata socket asincrono), Ember si aspetta che i dati siano lì immediatamente. Vedi sotto per come risolvere questo problema.

Gestione delle chiamate asincrone nella tua parte di percorso 1

Dal momento che stai effettuando una chiamata asincrona per popolare la lista utenti dovrai prima restituire un elenco utenti vuoto e poi popolarlo quando il tuo evento socket si risolve. Ecco un violino che dimostra questo utilizzando setTimeout per simulare la natura asincrona delle chiamate socket:

 App.IndexRoute = Ember.Route.extend({ model: function(){ var data = Ember.A(); window.setTimeout(function(){ data.pushObject('a'); data.pushObject('b'); data.pushObject('c'); }, 1000); return data; } }); 

È necessario utilizzare anche un array Ember (rispetto a un array Javascript nativo) in modo che Ember possa osservare le modifiche sull’array e aggiornare i modelli per te.

ESEMPIO: http://jsfiddle.net/UJ4Su/7/

(Vedi questa pagina per maggiori informazioni su come sfruttare il routing asincrono in Ember: http://emberjs.com/guides/routing/asynchronous-routing/ )

Approfittando di Ember.Deferred o Ember.RSVP

Quanto sopra è molto semplice, ma se si desidera trarre ancora più vantaggio da Ember, suggerirei di utilizzare direttamente Ember.Deferred o RSVP Promises. Ember.Deferred è un semplice mixin che funge da wrapper per alcune delle funzionalità di RSVP (in particolare then (), resolve () e reject ()). Ecco un esempio utilizzando Deferred:

 App.IndexRoute = Ember.Route.extend({ model: function(){ var deferredData = Ember.Deferred.create(); var data = []; window.setTimeout(function(){ data.push('a'); data.push('b'); data.push('c'); deferredData.resolve(data); }, 3000); return deferredData; }, actions: { loading: function(transition, originalRoute){ return true; } } }); 

Fondamentalmente restituiamo un Ember.Deferred al posto della Ember Array. Fino a quando il differimento non viene risolto, Ember passerà allo stato di caricamento. È quindi ansible visualizzare un messaggio di dati di caricamento all’utente mentre i dati vengono recuperati (tramite socket o AJAX). Ecco un esempio di funzionamento del violino:

ESEMPIO: http://jsfiddle.net/UJ4Su/10/

Ecco un esempio di Ember Promises:

ESEMPIO: http://jsfiddle.net/UJ4Su/12/

Maggiori informazioni sul caricamento / errore delle sottostazioni sono disponibili qui: http://emberjs.com/guides/routing/loading-and-error-substates/

Spero che sia d’aiuto!

Attuale per il 2016:

Utilizza le web socket di ember

Esegue tutto ciò di cui hai bisogno fuori dalla scatola.