Variabili globali in Ember

Question

Quale sarebbe il metodo appropriato per la memorizzazione di una variabile globale in Ember? Ad esempio, ho un modello User in Ember, ma mi piacerebbe sempre sapere quale specifica istanza di quel modello (incluso il suo id, nome, email, ecc.) Corrisponde all'utente attualmente loggato.

Devo immagazzinare questo all'interno di Ember in qualche modo? O è meglio semplicemente allegare una variabile JS all'oggetto window (ad esempio window.currentUserId = 1;) e utilizzarla?

Answer 1

Disclaimer: Tutte le tecniche riportate di seguito sono la mia esperienza con EmberJS negli ultimi mesi, oltre ad alcune discussioni con i miei colleghi. Qualunque cosa non sia corretta, per favore alza la voce. Siamo tutti in fase di apprendimento (e doc ember.js fa schifo al maxxx, quindi sii gentile;)

Attualmente ci sono due sviluppatori nel mio posto di lavoro che usano Ember.js. Siamo giunti alla conclusione che memorizzare le variabili globali nel globale ApplicationController è molto meglio che archiviare nello spazio dei nomi dell'applicazione. Questo perché il recupero di questo valore potrebbe essere molto complicato se è memorizzato nello spazio dei nomi dell'applicazione. E questo funziona bene anche in chiusura, e quindi rendere il namespace globale pulito (e relativamente libero). Non vuoi che il tuo utente faccia App.set a fare casino con la variabile vero?

Questo è basato su 1.0.0 pre-4.

si Considerando hanno questo currentUserId variabile globale

1. Memorizzazione nello spazio dei nomi. jsFiddle demo

   (function() { 
   
       function r() { 
        return Math.round(Math.random()*999); 
       } 
   
       var MyApp = Ember.Application.create({ 
        currentUserId: null, 
        ready: function() { 
         //demo purpose. 
         this.set('currentUserId', r()); 
        }, 
        rootElement: '#demo' 
       }); 
       MyApp.ApplicationView = Ember.View.extend({ 
        templateName: 'application-view', 
   
        //Direct child view 
        innerView: Ember.View.extend({ 
         templateName: 'inner-view', 
         setValue: function() { 
          this.set('controller.namespace.currentUserId', r()); 
         } 
        }), 
   
        //Direct child view, but with a controller attached 
        innerViewWithController: Ember.View.extend({ 
         controller: Ember.Controller.create(), 
         templateName: 'inner-view-with-controller', 
         setValue: function() { 
          this.set('parentView.controller.namespace.currentUserId', r()); 
         } 
        }), 
        getValue: function() { 
         alert(this.get('controller.namespace.currentUserId')); 
        }, 
        setValue: function() { 
         this.set('controller.namespace.currentUserId', r()); 
        } 
       }); 
   })(); 
   

2. vs conservazione in globale ApplicationControllerjsFiddle demo

   (function() { 
   
       function r() { 
        return Math.round(Math.random()*999); 
       } 
   
       var MyApp = Ember.Application.create({ 
        ApplicationController: Ember.Controller.extend({ 
         currentUserId: null, 
         init: function() { 
          //demo purpose 
          this.set('currentUserId', r()); 
         } 
        }), 
        rootElement: '#demo' 
       }); 
       MyApp.ApplicationView = Ember.View.extend({ 
        templateName: 'application-view', 
   
        //Direct child view 
        innerView: Ember.View.extend({ 
         templateName: 'inner-view', 
         setValue: function() { 
          this.set('controller.currentUserId', r()); 
         } 
        }), 
   
        //Direct child view, but with a controller attached 
        innerViewWithController: Ember.View.extend({ 
         controller: Ember.Controller.create(), 
         templateName: 'inner-view-with-controller', 
         setValue: function() { 
          this.set('parentView.controller.currentUserId', r()); 
         } 
        }), 
        getValue: function() { 
         alert(this.get('controller.currentUserId')); 
        }, 
        setValue: function() { 
         this.set('controller.currentUserId', r()); 
        } 
       }); 
   })(); 
   

Nota che:

1. Se si è scelto di memorizzare nella spazio dei nomi, è necessario accedervi tramite il controller di root per tutto il tempo, quindi è in realtà lo stesso di archiviazione in l'applicationController con una parola chiave extra namespace.

2. Se si è scelto di memorizzare in radice applicationController, per qualsiasi vista che scendono dal applicationView, si può facilmente accedere alla variabile nei modelli con {{variableName}} senza attraversamenti punti. Per impostazione predefinita, Ember.Js cerca variabili tramite i controller.

3. Nel caso peggiore, se la vista interna deve disporre di un proprio controllore, l'accesso alla variabile globale tramite controller principale (o spazio dei nomi) è leggermente più doloroso perché i controller non sono collegati, è necessario attraversare le visualizzazioni finché non vedi il controller di root. In Ember.JS, tutte le viste, per impostazione predefinita, avranno un set di controller e, per impostazione predefinita, il controller di un genitore. Il che significa che se non si specifica alcun controller, tutte le viste discendenti sono effettivamente collegate al controller principale. Per risolvere questo problema, è possibile eseguire binding obbligatorio nel controller per risolvere facilmente la bruttezza di attraversamento.

Io non suggerisco di mettere una variabile così importante nella window oggetto globale come sarà facilmente modificato dall'utente (e solleva eventuali problemi). Mettere nel namespace globale nello spazio dei nomi dell'applicazione brace riduce il potenziale problema, ma non se ne fanno globale

I miei 2 centesimi;)