ember从应用程序控制器

时间:2017-04-11 20:41:20

标签: javascript ember.js

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

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

//应用程序/模板/ application.hbs

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

//应用程序/控制器/ 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');
},
});

//应用程序/模板/组件/页-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>

//应用/组件/页-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',
});

1 个答案:

答案 0 :(得分:2)

我不太明白为什么你将page-notices控制器注入application控制器;因为您已将page-notices组件直接放到application.hbs。我可能错了,但我觉得你混淆了controllercomponent

无论如何,以下情况应该有效。

  1. 删除pagenotices: Ember.inject.controller("page-notices")这个;因为我们没有按照上面的解释使用pagenotices控制器。
  2. 更改elselogout操作的ajax处理程序中的application.js部分,如下所示:

      self.set('pageerrors', response.error);
      self.set('pageerrorsview', '');
    

    以便相应的属性直接保存到application控制器本身。

  3. 将相应的属性传递给page-notices内的application.hbs组件 {{page-notices pageerrors=pageerrors pageerrorsview=pageerrorsview}}

  4. pageerrors中声明pageerorsviewapplication.js的初始值,如果需要,可以从page-notices组件中删除它们。我的意思是pageerrors: '', pageerrorsview: 'hide'

  5. 的声明

    如果我得到你的要求,最好的问候,这应该有用。