如何訪問在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鈎子。