EmberJS - 如何全局设置所有组件的属性？

Question

我有一段数据（对象）从服务器端脚本打印为全局变量。

user = { id : 1, name: 'foo', avatar : 'http://foo.com/avatar.jpg'}

整个应用程序的各个部分都需要这条信息，包括一些组件。

我知道我可以遍历每个组件控制器并设置一个属性来保存用户对象。

App.FooBarComponent = Ember.Component.extend({
    user: user
});


App.AnotherFooComponent = Ember.Component.extend({
    user: user
});

如何减少这种重复？有没有办法为所有组件设置属性，以便变量可用于 handlebars 表达式?

<script type="text/x-handlebars" id="components/foo-bar">
    <h1>{{user.name}}</h1>
</script>

<script type="text/x-handlebars" id="components/another-foo">
    <h1>{{user.name}}</h1>
</script>

我的印象是我应该能够从 handlebar 表达式访问任何全局 js 变量。但是我好像不是这样。

Answer 1

您可以为此目的使用您的应用程序控制器:)

 <h1>{{controllers.application.user.name}}</h>

但是您将 need 您的 ApplicationController 在控制器中 :)

另一种方法是制作自定义组件 q 然后像

一样扩展它

 App.MyComponent = Ember.Component.extend({
      user : user
 });
 AppFooComponent = App.MyComponent.extend({
     //user is gotten from MyComponent
 });

Answer 2

使用Ember.Application.inject (http://emberjs.com/api/classes/Ember.Application.html#method_inject)

var user = Ember.Object.create({
    id : 1,
    name: 'foo', avatar : 'http://foo.com/avatar.jpg'
});
App.register('user:main', user);
App.inject('component', 'user', 'user:main');

然后在你的组件模板中做

{{user.name}}

EmberJS - 如何全局设置所有组件的属性？

EmberJS - How to Globally set an property of all component?

javascript

ember.js