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: "/"}, fu