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

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计算为null。 我尝试在chrome的dev工具中调试模型方法，但发现模型未得到调用。请让我知道我误会了什么？

Answer 1

Ember组件没有model（）和afterModel（）挂钩，您需要做的是，首先在route中访问afterModel（）挂钩中的本地存储数据，然后将解析的模型传递给组件。

主要路线

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

主要路线

{{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}}

Answer 2

您确实必须阅读有关component的文档。 明确指出每个阶段的生命周期挂钩是什么，

1. 在里面
2. 更新
3. 删除

https://guides.emberjs.com/v2.11.0/components/the-component-lifecycle/

模板唯一可以从路由访问的是model因此您可以在相应模板中直接使用模型，也可以将其传递给组件。

如果您的组件需要其他属性，则可以在路由的setupController(controller, model)挂钩中设置它们，也可以为该路由创建一个控制器。

下图是一种特定路线的示例，

注意：虚线表示运行时生成控制器

参见每个“层”上方的图像，仅可以直接在上层内部访问属性OR动作（特殊情况是将路由自动注入model路由到运行时生成的控制器中）。

您不需要专门定义自己的控制器，因为如果找不到路由，它将在运行时生成一个。

该组件是完全与任何东西隔离的（除非您向其中注入了任何东西）。 使用组件的唯一方法是将数据和操作（通常用于处理事件）传递给它。

摘要

（1）组件只能访问您专门传递给它的数据（请参见下面的代码）。

 {{component-name
   internalName=externalName
 }}

（2）模板只能访问控制器内部可用的数据，无论是自动生成的数据还是通过ember g controller controller-name访问的数据。 （ model属性是一个例外）

（3）如果您希望模板具有路由数据，请使用setupController钩子。