Globale Variablen in Ember

Question

Was wäre die geeignete Methode zum Speichern einer globalen Variablen in Ember? Zum Beispiel habe ich ein Benutzermodell in Ember, aber ich würde immer gerne wissen, welche spezifische Instanz dieses Modells (einschließlich ID, Name, E-Mail, usw.) dem aktuell angemeldeten Benutzer entspricht.

Sollte ich das irgendwie in Ember speichern? Oder ist es besser, einfach eine JS-Variable an das Objekt window anzuhängen (z. B. window.currentUserId = 1;) und das zu verwenden?

Answer 1

Haftungsausschluss: Alle unten aufgeführten Techniken sind meine Erfahrungen mit EmberJS in den letzten Monaten und einige Diskussionen mit meinen Kollegen. Alles in Ordnung, bitte erhebe deine Stimme. Wir sind alle in der Lernphase (und ember.js doc saugt an die maxxx, also sei nett;)

Derzeit gibt es zwei Entwickler in meinem Arbeitsplatz, die Ember.js verwenden. Wir kamen zu dem Schluss, dass das Speichern globaler Variablen im globalen ApplicationController viel besser ist als das Speichern im Anwendungsnamespace. Dies liegt daran, dass das Abrufen dieses Werts sehr unordentlich sein kann, wenn es im Anwendungsnamespace gespeichert wird. Und dies funktioniert auch beim Schließen gut und macht daher den globalen Namensraum sauber (und relativ hackefrei). Sie möchten nicht, dass Ihr Benutzer App.set mit der Variablen richtig macht?

Dies basiert auf 1.0.0 pre-4.

Sie betrachtet haben diese currentUserId globale Variable

1. im Namensraum zu speichern. 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 Speicherung in globalen 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()); 
        } 
       }); 
   })(); 
   

Beachten Sie, dass:

1. Wenn Sie im Namensraum speichern gewählt haben, müssen Sie es Zugriff über der Root-Controller die ganze Zeit, so ist es eigentlich das gleiche wie Speichern in der applicationController mit einem zusätzlichen Schlüsselwort namespace.

2. Wenn Sie wählen es in Wurzel zu speichern applicationController, für was auch immer Ansichten, die von den applicationView absteigen, können Sie einfach die Variable in Ihren Vorlagen mit {{variableName}} ohne Punkt Traversierungen zugreifen. Standardmäßig sucht Ember.Js nach Variablen über Controller.

3. Im schlimmsten Fall, wenn Ihre interne Ansicht einen eigenen Controller haben muss, ist der Zugriff auf die globale Variable über Root-Controller (oder Namespace) etwas schmerzhafter, da Controller nicht verknüpft sind, müssen Sie Ihre Ansichten durchlaufen bis Sie den Root-Controller sehen. In Ember.JS haben alle Ansichten standardmäßig einen Controller und standardmäßig den übergeordneten Controller. Das heißt, wenn Sie keinen Controller angeben, sind alle Nachkommenansichten tatsächlich mit dem Root-Controller verknüpft. Um dieses Problem zu lösen, können Sie variable Bindung in der Steuerung machen, um die traversierende Hässlichkeit leicht zu lösen.

ich nicht vorschlagen, dass Sie eine so wichtige Variable in der globalen window Objekt setzen, da es leicht vom Anwender verändert werden (und wirft alle möglichen Fragen). es im globalen Namespace in der glühenden Kohlen Anwendung Namespace setzen reduziert das potenzielle Problem, aber nicht, wenn Sie es global

Mein 2 Cent machen;)