# mini-tplt

**Repository Path**: houyuncheng2020/mini-tplt

## Basic Information

- **Project Name**: mini-tplt
- **Description**: 简单支持mustache语法的HTML模板引擎
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-29
- **Last Updated**: 2021-05-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 最最简单的HTML模板引擎
简单支持mustache语法

## 引入
```HTML
<script src="/dist/mini-tplt.js"></script>
```
引入文件后会在全局暴露TemplateEngine变量，可以通过：
```javascript
TemplateEngine.render(template, data);
```

将数据注入模板字符串中。

## 基本使用

```HTML
<script type="text/template" id="tplt_01">
  {{  prefix   }}<h3>{{ time   }}我买了{{ thing }}, 好{{mood}}</h3>{{ surfix}}
</script>

<script>
  document.getElementById('test_01').innerHTML = TemplateEngine.render(
    document.getElementById('tplt_01').innerHTML,
    {
      time: '昨天',
      thing: 'something to eat',
      mood: '高兴',
      prefix: '前缀',
      surfix: '后缀',
    }
  );
</script>
```
输出结果：<br/>
![test_01](./assets/test_01.png)

## 数据遍历

```HTML
<script type="text/template" id="tplt_02">
  <h3>我请您吃</h3>
    <ul>
      {{#food}}
        <li>{{.}}</li>
      {{/food}}
    </ul>
</script>

<script>
  document.getElementById('test_02').innerHTML = TemplateEngine.render(
    document.getElementById('tplt_02').innerHTML,
    {food: ['蒸羊羔', '蒸鹿尾儿', '蒸熊掌', '...']}
  );
</script>
```
输出结果：<br/>
![test_02](./assets/test_02.png)

## 嵌套结构

```HTML
<script type="text/template" id="tplt_03">
  <div>
    <ol>
      {{#students}}
        <li>
          学生{{name}}的爱好是
          <ol>
            {{#hobbies}}
              <li>{{.}}</li>
            {{/hobbies}}
          </ol>
        </li>
      {{/students}}
    </ol>
  </div>
</script>

<script>
document.getElementById('test_03').innerHTML = TemplateEngine.render(
  document.getElementById('tplt_03').innerHTML,
  {
    students: [
      { name: 'Wango', hobbies: ['吃饭', '睡觉', '写BUG'] },
      { name: 'Lily', hobbies: ['教书', '育人'] },
      { name: 'Tom', hobbies: ['放长线', '钓大鱼', '承包大海'] }
    ]
  }
);
</script>
```

输出结果：<br/>
![test_03](./assets/test_03.png)

## 支持对象属性注入

```HTML
<script type="text/template" id="tplt_03">
  <div>
    <ol>
      {{#students}}
        <li>
          学生{{name}}的爱好是
          <ol>
            {{#hobbies}}
              <li>{{.}}</li>
            {{/hobbies}}
          </ol>
        </li>
      {{/students}}
    </ol>
  </div>
</script>

<script type="text/template" id="tplt_04">
  <h3>{{person.name}}的旁边是{{person.next.name}}, Ta的旁边是{{person.next.next.name}}</h3>
</script>
```

输出结果：<br/>
![test_04](./assets/test_04.png)