javascript - 如何访问在路由或组件中设置的模板文件上的变量

Question

这是一个非常基本的问题，但我没有在任何地方找到它。

根据我的理解，在渲染模板对应的路由或 component.js 的 beforeModel() model() 等函数被调用之前。

我想做什么:我想在我的 sidenav 上显示登录用户的图像。用户的数据存储在本地存储中。

我的问题在这里我希望在模型中设置一个变量并返回相同的变量将解决我的问题，但我的模型方法根本没有被调用。

我的代码:模板:

{{#paper-sidenav
      class="md-whiteframe-z2"
      name="right"
      open=leftSideBarOpen2
      lockedOpen=leftSideBarLockedOpen
      position="right"
      onToggle=(action (mut leftSideBarOpen2))}}
      {{#paper-toolbar as |toolbar|}}
        {{#paper-toolbar-tools}}
          <img src="http://example.com/users/{{model.username}}.jpg" />
        {{/paper-toolbar-tools}}
      {{/paper-toolbar}}
      {{#paper-content padding=true}}
        Çup?
      {{/paper-content}}
    {{/paper-sidenav}}

Component.js

import Ember from 'ember';

export default Ember.Component.extend({
  beforeModel(){

  },
  model(){
    let user = localStorage.get('user');
    console.log(user.username);
    return user;
  },
  actions:{
    toggle(propName) {
      this.toggleProperty(propName);
    }
  }
});

在控制台中，我收到错误“GET http://example.com/users/.jpg 404(未找到)”，这肯定表明我的模板中的 user.username 评估为空。我尝试在 chrome 的开发工具中调试我的模型方法，发现模型没有被调用你能告诉我我错在哪里吗？

Answer 1

Ember 组件没有 model() 和 afterModel() 钩子(Hook)，你需要做的是先在路由中访问 afterModel() 钩子(Hook)中的本地存储数据，并将解析后的模型传递给组件。

主要路线

 export default Ember.Route.extend({
      model(){
        //load data
      },
      afterModel(model){
       //access local store and set to model
         model.set('users',data);
      }
    });

主要路线hbs

{{component componetModel=model}}

内部组件

import Ember from 'ember';

    export default Ember.Component.extend({
       init(){
         this.set('users', componetModel.users);
       }
    });

组件 hbs

{{#each user in users}}
  {{user.name}}
{{/each}}