本文详解如何在 ember.js 应用中正确定义、注入并使用 service 来管理与展示静态或响应式事件数据，涵盖文件命名规范、依赖注入语法、模板绑定要点及响应式更新建议。
本文详解如何在 ember.js 应用中正确定义、注入并使用 service 来管理与展示静态或响应式事件数据，涵盖文件命名规范、依赖注入语法、模板绑定要点及响应式更新建议。
在 Ember.js 中，Service 是跨路由、组件和控制器共享状态与逻辑的核心机制。但其正确使用高度依赖约定优于配置（Convention over Configuration）原则——尤其是文件名、导入语法与模板引用的一致性。你遇到的表格为空问题，根源在于三个关键环节的不匹配：服务文件命名不规范、控制器未正确注入服务、模板中错误地尝试访问未声明的属性。
✅ 正确步骤详解
1. 严格遵循文件命名约定
Ember 使用连字符分隔（kebab-case）作为服务文件名标准。你的服务文件必须命名为 app/services/event-handler.js（注意是 services/ 目录，不是 service/），而非 event_handler.js 或 app/service/event_handler.js。
⚠️ 错误路径（会导致 lookup 失败）：
app/service/event_handler.js ❌ app/services/event_handler.js ❌
✅ 正确路径：
app/services/event-handler.js ✔️
2. 使用装饰器语法注入服务（推荐）
现代 Ember（v4+）推荐使用 @service 装饰器进行声明式注入，简洁且类型安全。修改控制器如下：
// app/controllers/event-controller.js
import Controller from '@ember/controller';
import { service } from '@ember/service';
export default class EventControllerController extends Controller {
@service eventHandler; // 自动查找 services/event-handler.js
}
? 不再需要手动调用
getOwner(this).lookup()——@service会自动完成注册、实例化与注入，并确保响应式更新链路完整。
3. 模板中直接访问服务属性
注入后，服务实例以 this.eventHandler 形式可用。模板中应直接遍历 eventHandler.eventList：
<!-- app/templates/event-controller.hbs -->
| Event name | Event Date Start | Event Date End |
|---|---|---|
| {{event.EventName}} | {{event.StartDate}} | {{event.EndDate}} |
4. （可选）支持运行时响应式更新
若 eventList 后续会动态修改（如通过 API 加载或用户操作更新），需用 @tracked 标记该属性，使模板自动重渲染：
// app/services/event-handler.js
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';
export default class EventHandlerService extends Service {
@tracked eventList = [
{
EventName: 'test event 1',
EventDesc: 'test event 1 desc',
StartDate: '16.11.2023',
EndDate: '05.02.2024',
EventType_ID: 1,
},
// ... 其他事件
];
}
? 验证技巧：在浏览器控制台执行
await this.owner.lookup('service:event-handler')，确认返回的服务实例是否包含eventList属性，可快速定位注入失败原因。
遵循以上四步，你的事件表格将立即正常渲染。核心要诀是：文件名即服务名、装饰器即注入、模板直访属性、动态数据加 @tracked —— 这是 Ember 数据流清晰、可维护的基石。
