ruby-on-rails - Ember 中的全局变量

Question

在 Ember 中存储全局变量的合适方法是什么？例如，我在 Ember 中有一个用户模型，但我总是想知道该模型的哪个特定实例(包括它的 id、名称、电子邮件等)对应于当前登录的用户。

我应该以某种方式将其存储在 Ember 中吗？或者将 JS 变量附加到 window 是否更好？对象(例如 window.currentUserId = 1; )并使用它？

Answer 1

免责声明:下面显示的所有技术都是我过去几个月使用 EmberJS 的经验，以及与同事的一些讨论。如有不妥，请提高声音。我们都处于学习阶段(并且 ember.js 文档对 maxxx 很烂，所以请善待；)

目前我的工作场所有两个开发人员正在使用 Ember.js。我们得出一个结论，将全局变量存储在全局 ApplicationController比存储在应用程序命名空间中要好得多。这是因为如果该值存储在应用程序命名空间中，则检索该值可能会非常困惑。这在闭包中也很有效，因此使全局命名空间干净(并且相对无破解)。你不希望你的用户做 App.set弄乱变量对吗？

这是基于 1.0.0 pre-4。

考虑到你有这个 currentUserId全局变量

存储在命名空间中。 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());
        }
    });
})();

vs 全局存储 ApplicationController jsFiddle 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());
        }
    });
})();

注意:

如果您选择存储在命名空间中，您将需要一直通过根 Controller 访问它，因此它实际上与存储在 applicationController 中相同，只是多了一个 namespace。关键词。

如果您选择将其存储在根目录 applicationController , 对于来自 applicationView 的任何 View ，您可以使用 {{variableName}} 轻松访问模板中的变量没有任何点遍历。默认情况下，Ember.Js 通过 Controller 查找变量。

在最坏的情况下，如果您的内部 View 需要拥有自己的 Controller ，通过根 Controller (或命名空间)访问全局变量会稍微痛苦一些，因为 Controller 没有链接，您需要遍历 View 直到看到根 Controller 。在 Ember.JS 中，默认情况下，所有 View 都将有一个 Controller 集，并且默认情况下是父级的 Controller 。这意味着如果您从不指定任何 Controller ，所有后代 View 实际上都链接到根 Controller 。为了克服这个问题，可以在 Controller 中做变量绑定(bind)，轻松解决遍历的丑陋。

我不建议你把这么重要的变量放在全局 window对象，因为它很容易被用户修改(并引发任何潜在问题)。将它放在 ember 应用程序命名空间中的全局命名空间中可以减少潜在的问题，但如果将其设为全局则不会

我的 2 美分 ;)