16、Ember.js 自定义组件开发指南

Ember.js 自定义组件开发指南

1. Ember.js 自定义组件概述

Ember.js 自定义组件通常由两部分组成：Handlebars 模板和组件类。对于最简单的组件，可能仅需一个模板即可。与 JavaServer Faces 或 Microsoft ASP.NET MVC 等大型服务器端框架不同，Ember.js 自定义组件的代码量相对较少，且组件的组成部分也不多，这充分体现了 Ember.js 作为 Web 开发框架的强大之处。

2. 实现可选择列表组件

可选择列表组件允许用户从列表中选择一个项目，并且可以通过“删除”按钮删除项目。该组件由三个子组件构成：
- 可选择列表组件（selectable-list） ：使用 Twitter Bootstrap 的 List Group CSS 标记来显示用户可选择的项目列表。
- 可选择列表项组件（selectable-list-item） ：同样使用 Twitter Bootstrap 的 List Group CSS 标记来显示列表中的每个单独项目。
- 删除模态框组件（delete-modal） ：显示模态面板，提示用户确认项目的删除操作。

2.1 路由定义

在实现组件之前，需要了解路由定义。以下是路由定义代码：

Montric.Router.map(function () {
    this.resource("main", {path