Ember.js Octane中路由返回的model在控制器内访问返回undefined

问题根因 #

• 控制器的init生命周期钩子执行时机早于路由的setupController方法：控制器实例初始化完成后，路由才会执行setupController为控制器的model属性赋值，因此init阶段读取this.model时赋值操作尚未执行，返回结果为undefined。
• 直接打印this能看到model属性是浏览器控制台的对象引用特性导致：打印控制器实例时输出的是对象的引用地址，当你手动在控制台展开该对象时，setupController已经执行完毕完成了model赋值，因此展开后能看到对应属性，并非打印瞬间的对象实际状态。

解决方案 #

如果需要在控制器中使用加载完成的model执行逻辑，可选择以下任意一种方案：

1. Octane推荐写法：使用tracked响应式系统+getter

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';

export default class ChatIndexController extends Controller {
  // 当model赋值完成后，访问getter时会自动拿到最新的model值
  get unreadMessages() {
    console.log('已获取到model：', this.model);
    return this.model?.filter?.(item => !item.read) || [];
  }
}

2. 监听model属性变化（仅兼容旧版本代码，不推荐新业务使用）

import Controller from '@ember/controller';
import { observer } from '@ember/object';

export default class ChatIndexController extends Controller {
  onModelChange: observer('model', function() {
    console.log('model已完成赋值：', this.model);
    // 此处执行对应业务逻辑
  })
}

3. 将逻辑迁移到路由的setupController方法中

// 路由文件中修改setupController逻辑
setupController(controller, model) {
  const messages = model.chatMessages;
  controller.set('model', messages);
  // 赋值完成后直接执行需要用到model的逻辑
  console.log('model已赋值：', messages);
}

内容的提问来源于stack exchange，提问作者Neil