Question

这是一个非常基本的问题，但我找不到它。

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

我想做什么： 我想在我的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（Not Found）”，这肯定说我的模板中的user.username评估为null。我尝试在chrome的开发工具中调试我的模型方法，发现模型没有被调用能不能让我知道我在哪里错了？

Answer 1

Ember组件没有model（）和afterModel（）挂钩，你需要做的是首先访问路由中的afterModel（）钩子中的本地存储数据，并将已解析的模型传递给组件。

主要路线

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

Answer 2

您必须阅读有关组件的文档。它清楚地说明了每个阶段的生命周期钩子，

初始化
更新
删除

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

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

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

下图是一个特定路线的示例

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

见每个＆＃34;层＆＃34;上面的图像只能在上层内部访问属性或操作（特殊情况是路由自动注入model到运行时生成的控制器中）。

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

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

<强>摘要

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

 {{component-name
   internalName=externalName
 }}

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

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

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

2 个答案: