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

Question

这是非常基本的问题，但我在任何地方都找不到它。

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

我想做的事情: 我想在我的侧导航上显示登录用户的图像。用户的数据存储在本地存储中。

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

我的代码: 模板:

{{#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 计算结果为 null。我尝试在 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}}