Teacup 模板引擎使用详解

Teacup 是一个基于 CoffeeScript 的模板系统，它允许开发者使用 DSL（领域特定语言）函数来构建 HTML 字符串。本文将详细介绍 Teacup 的安装指南、使用方法、API 文档以及安装方式。

1. 安装指南

Teacup 支持 CommonJS、AMD 模块或纯 CoffeeScript 的打包方式。以下是安装步骤：

使用 npm 安装 Teacup：

$ npm install teacup

2. 项目使用说明

Teacup 的基本使用方法是利用 renderable 辅助函数创建一个模板函数，当调用该函数时返回一个 HTML 字符串。

例如：

{renderable, ul, li, input} = require 'teacup'

template = renderable (teas) ->
  ul ->
    for tea in teas
      li tea
    input type: 'button', value: 'Steep'

console.log template(['Jasmine', 'Darjeeling'])
# 输出: <ul><li>Jasmine</li><li>Darjeeling</li></ul><input type="button" value="Steep"/>

还可以使用 render 辅助函数立即将模板渲染为一个字符串：

{render, ul, li} = require 'teacup'

output = render ->
  ul ->
    li 'Bergamont'
    li 'Chamomile'

console.log output
# 输出: <ul><li>Bergamont</li><li>Chamomile</li></ul>

3. 项目API使用文档

以下是一些 Teacup API 的使用示例：

• Ids 和 Classes：可以通过传递 CSS 选择器作为标签函数的第一个参数来添加 ids 和 classes。

{render, div} = require 'teacup'

console.log render ->
  div '#confirm.btn.btn-small'
# 输出: <div id="confirm" class="btn btn-small"></div>

• Attributes：使用对象字面量定义标签属性。

{render, button} = require 'teacup'

console.log render ->
  button '.btn', type: 'button', disabled: true, 'Click Me'
# 输出: <button class="btn" type="button" disabled="disabled">Click Me</button>

• Escaping：Teacup 默认会对输入进行转义。如果要禁用转义，可以使用 raw 辅助函数。

{render, raw, h1, div} = require 'teacup'

inner = render ->
  h1 'Header'

console.log render ->
  div inner
# 输出: <div>&lt;h1&gt;Header&lt;/h1&gt;</div>

console.log render ->
  div ->
    raw inner
# 输出: <div><h1>Header</h1></div>

• Text：text 辅助函数用于在不包装标签的情况下插入字符串。

{render, text, b, em, p} = require 'teacup'

console.log render ->
  p ->
    text 'Sometimes you just want '
    b 'plain'
    text ' text.'
# 输出: <p>Sometimes you just want <b>plain</b> text.</p>

更多 API 使用详情，请参考官方文档。

4. 项目安装方式

Teacup 的安装方式已经在前面的安装指南中说明。简而言之，您可以使用 npm 来安装 Teacup：

$ npm install teacup

然后根据您的项目需求，将其集成到您的项目中。

以上是 Teacup 的基本安装和使用说明，如果您需要在具体项目中使用，可以根据项目类型（如 Express、Backbone、Rails、React 等）进行相应的配置和集成。