Emberjs Model 從路線返回未定義在 controller

Question

我的 Ember 應用程序有一個奇怪的行為。 我無法理解它。 基本上我使用的是 Ember octane，我想從我的route訪問我的 model 到我的controller 。

這是我的路線

import Route from '@ember/routing/route';

export default class ChatIndexRoute extends Route {
  model() {
    return {
      chatMessages: [
        {
          username: '1',
          message: 'Hi',
          read: true,
        },
        {
          username: '1',
          message: 'how are you?',
          read: false,
        },
        {
          username: '1',
          message: 'its been a long time :)',
          read: false,
        },
      ],
    };
  }

  setupController(controller, model) {
    controller.set('model', model.chatMessages);
  }
}

這是我的 controller

import Controller from '@ember/controller';


export default class ChatIndexController extends Controller {
  init() {
    super.init(...arguments);
    console.log('test', this.model);
  }
}

當我console.log(this.model)我得到了undefined 。

但是當我簡單地執行console.log(this)時，我得到了一個完整的 object 和一個充滿聊天消息的chatmessages屬性

看到這張圖片

這太瘋狂了

Answer 1

這只是時間上的一點混亂。 controller 上的init()在路由上的setupController之前執行。 所以this.model是undefined 。

但是當你執行console.log(this)時，你會得到完整的 controller 記錄。 控制台的神奇之處在於它是實時的。 所以當這個 object 稍后（不久之后，只是一點點）更新時，您將在控制台中看到它。 因此，您可以在控制台中檢查 controller 上的model屬性，即使在您登錄 controller 時它不存在。

Answer 2

一種解決方法是直接在模板中使用 model，另一種解決方法是使用計算屬性。

export default class ChatIndexController extends Controller {
  init() {
    super.init(...arguments);
    console.log('test', this.model);
  }
  chatMessages: computed(function(){
     console.log(this.model); //will print the model
  }
}