Ember Bootstrap 技术文档

1. 安装指南

Ember Bootstrap 的安装方式较为简单，首先需要运行 rake 命令来构建 Ember Bootstrap。构建完成后，会在 dist/ 目录下生成三个文件：ember-bootstrap.js、ember-bootstrap.min.js 和 ember-bootstrap.prod.js。这三个文件分别是未压缩版、压缩版和生产环境版（去掉了断言、废弃警告等信息）。

如果是在 Linux 系统下构建，需要进行 JavaScript 运行时的安装以便进行压缩。可以选择安装 Node.js 或者通过 gem install therubyracer 来安装。

2. 项目的使用说明

Ember Bootstrap 是一套使用 Twitter Bootstrap（当前版本为 2）样式工具集，为 Ember.js 提供的 UI 元素。以下是一些已实现的 UI 元素：

视图 (Views)

• 模态框（Modal panes）
• 导航列表（Nav lists）
• 药丸式标签（Pills）
• 警告消息（Alert messages）
• 块状警告消息（Block alert messages）
• 进度条（Progress bars）
• 标签（Labels）
• 徽章（Badges）
• 块（Wells）
• 面包屑导航（Breadcrumbs）
• 分页器（Pager）
• 下拉菜单（Dropdown）

表单 (Forms)

• 文本框（Text Field）
• 文本域（Text Area）
• 选择框（Select）
• 不可编辑输入（Uneditable）

具体的使用方法可以参考项目中提供的代码示例。

3. 项目API使用文档

以下是部分组件的 API 使用方法：

• Bootstrap.ModalPane

  Bootstrap.ModalPane.popup({
    heading: "示例模态框",
    message: "示例消息...",
    primary: "确定",
    secondary: "取消",
    showBackdrop: true,
    showCloseButton: true,
    animateBackdropIn: {method: "fadeIn", options: "slow"},
    animateBackdropOut: {method: "fadeOut"},
    callback: function(opts, event) {
      if (opts.primary) {
        // 确定按钮被按下
      } else if (opts.secondary) {
        // 取消按钮被按下
      } else {
        // 关闭按钮被按下
      }
    }
  });
  

• Bootstrap.NavList

  <script type="text/x-handlebars">
    {{view Bootstrap.NavList
        contentBinding="SampleApp.navController.content"
        selectionBinding="SampleApp.navController.selection"}}
  </script>
  

• Bootstrap.Tabs

  <script type="text/x-handlebars">
    {{view Bootstrap.Tabs
        contentBinding="SampleApp.tabsController.content"
        selectionBinding="SampleApp.tabsController.selection"}}
  </script>
  

更多组件的使用方法，可以参考项目的 README 文件和 GitHub 项目的 Wiki。

4. 项目安装方式

项目的安装方式已在“安装指南”一节中说明。简要概括，就是运行 rake 命令构建项目，然后根据需要选择合适的文件进行使用。