来自路由的 Emberjs 模型在控制器中返回未定义

Question

我的 Ember 应用程序有一个奇怪的行为。我无法理解它。基本上我使用的是 Ember octane，我想从我的 route 访问我的模型到我的 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);
  }
}

这是我的控制器

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) 我得到了一个完整的对象，模型属性填充了 chatmessages

See this image

这太疯狂了

Answer 1

这只是时间上的一点混乱。 init() 在控制器上执行 before setupController 在路由上。所以 this.model 是 undefined.

但是当您执行 console.log(this) 时，您会记录完整的控制器。控制台的神奇之处在于它是实时的。所以当这个对象稍后（不久之后，只是一点点）更新时，您将在控制台中看到它。因此，您可以在控制台中检查控制器上的 model 属性，即使您登录控制器时它不存在。

Answer 2

一个解决方法是直接在模板中使用模型，另一个解决方法是使用计算属性。

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

来自路由的 Emberjs 模型在控制器中返回未定义

Emberjs Model from route returning undefined in controller

javascript

ember.js

ember-octane