ember 从应用程序控制器设置组件数据答案

【问题标题】：ember set component data from application controllerember 从应用程序控制器设置组件数据
【发布时间】：2017-04-11 20:41:19
【问题描述】：

我是 Ember 的新手，并试图弄清楚数据路由的工作原理。我的 application.hbs 文件中包含一个“页面通知”组件和模板。它处理向用户显示错误或其他通知。我无法弄清楚如何从应用程序控制器设置组件内部的数据。

当用户在应用程序控制器中触发注销操作时，我通过 ajax json 请求将其发送到服务器，然后如果返回错误，则需要更新页面通知组件。页面通知控制器需要看起来像什么才能完成这项工作？我问错了问题，不应该为此使用控制器吗？

//app/templates/application.hbs

{{app-header}}
<div id="pagecontent">
    {{page-notices}}
    <div id="wrapper">
        {{outlet}}
        <div class="push"></div>
    </div>
</div>
{{app-footer}}

//app/controllers/application.js

import Ember from 'ember';
import ENV from '/config/environment';

var $ = Ember.$;

export default Ember.Controller.extend({
session: Ember.inject.service('session'),
pagenotices: Ember.inject.controller("page-notices")
actions: {
    logout: function() {
      var self = this;
      $.ajax({
          dataType: "json",
          method: 'GET',
          url: ENV.APP.apiHost,
          data: {p: 'logout'},
          success: function( response ){
            if( response.success || (response.loggedin == false) ){
              self.get('session').invalidate();
              self.transitionToLoginRoute();
            } else {
              self.get('pagenotices').set('pageerrors', response.error);
              self.get('pagenotices').set('pageerrorsview', '');
            }
          }
        });
    },
},
transitionToLoginRoute: function() {
  this.transitionToRoute('login');
},
});

//app/templates/components/page-notices.js

<div id="pagenotices" class="{{pagenoticeview}}">
    <div id="pageerrors" class="error centered {{pageerrorsview}}">{{pageerrors}}</div>
    <div id="pagemessages" class="notice centered {{pagemessagesview}}">{{pagemessages}}</div>
</div>

//app/components/page-notices.js

import Ember from 'ember';
import ENV from '/config/environment';

const { inject: { service }, Component } = Ember;

export default Component.extend({
pagenoticeview: 'hide',
pageerrors: '',
pageerrorsview: 'hide',
pagemessages: '',
pagemessagesview: 'hide',
});

【问题讨论】：

标签： javascript ember.js

【解决方案1】：

我不太明白你为什么将page-notices 控制器注入application 控制器；因为您已经将page-notices 组件直接放入application.hbs。我可能错了，但我感觉你混淆了controller 和component。

无论如何，以下应该可以工作。

删除pagenotices: Ember.inject.controller("page-notices")这个；正如我上面解释的那样，因为我们没有使用 pagenotices 控制器。
更改application.js 内logout 操作的ajax 处理程序中的else 部分，如下所示：
```
  self.set('pageerrors', response.error);
  self.set('pageerrorsview', '');
```
这样对应的属性就直接保存到application控制器本身了。
将对应的属性从application.hbs 内部传递给page-notices 组件 {{page-notices pageerrors=pageerrors pageerrorsview=pageerrorsview}}
在application.js 中声明pageerrors 和pageerorsview 的初始值，并根据需要将它们从page-notices 组件中删除。我的意思是pageerrors: '', pageerrorsview: 'hide'

如果我得到你的要求，这应该可以工作，最好的问候。

【讨论】：

做到了。谢谢！