wet-template 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
wet-template 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript
操作系统: 跨平台
收录时间: 2020-08-11
提 交 者: hyjiacan

wet 名称来缩写于 WEb Template

wet 是一个基于 ES6 的简易服务器端 WEB 模板引擎,完全没有第三方依赖。

安装

Github: https://github.com/hyjiacan/wet

Gitee: https://gitee.com/hyjiacan/wet

npm: https://www.npmjs.com/package/@hyjiacan/wet

npm i @hyjiacan/wet

模板用法

wet 模板基于 html 语法,模板语言也与常用的 js 写法一致。

demo.html

<div>
  <ul>
    <t-for on="item of list">
      <li>{{item}}</li>
    </t-for>
    <t-for on="item in set">
      <li>
        {{item.key}}: {{item.value}}
        <t-with xx="item.value.x.y">
          <span>{{xx.z}}</span>
        </t-with>
      </li>
    </t-for>
  </ul>
  <t-if on="visible">
    condition is true
  </t-if>
  <t-else>
    condition is false
  </t-else>
  <t-tree on="treeData as item">
    <div>
      {{item.data}}
      <div>
      	<t-children />    
      </div>
    </div>
  </t-tree>
  <t-include file="../common/footer.html" />
</div>
const context = {
  list: [1, 2, 3],
  set: {
    a: 1,
    b: {
      x: {
        y: {z: 5}
      }
    },
    c: 3
  },
  visible: false
}
wet.render('/path/to/demo.html', context, {cache: true})

通过调用 wet.render(template, context, options?) 执行模板的渲染,此函数会返回渲染后的HTML字符串。

  • template 模板文件,可以是相对路径或绝对路径
  • context 模板的上下文,为模板渲染提供数据。必须是对象,不能是数组
  • options 可选的选项,目前只有一个字段 cache,用于指示是否缓存模板文件。注:此缓存指缓存模板文件的DOM结构,并不是渲染结果

t-for

此标签用于遍历数据集。

for..of 遍历数组

<t-for on="item of array" step="1">
<span>{{item}}</span>
</t-for>

step 是步长,默认为 1

也可以写作

<t-for on="item, index of array">
<span>{{index}}: {{item}}</span>
</t-for>

index 为数组的索引,从 0 开始

另外, for...of 也可以直接根据指定数值进行循环

<t-for on="item of 10">
<span>{{item}}</span>
</t-for>

<t-for on="item of 1-10">
<span>{{item}}</span>
</t-for>

1-10 表示从 1 到 10,当起始位置为 0 时 0-10 ,可以省略为:10。 - 两侧不能有空白。仅支持整数。

范围始终包含边界值,如:

  • 1-10: 1, 2, ..., 9, 10
  • 0-10: 0, 1, ..., 9, 10
  • 10: 0, 1, ..., 9, 10
  • 9: 0, 1, ..., 9

array 暂不支持数组字面量

for..in 遍历集合

<t-for on="item in object">
<span>{{item.key}}: {{item.value}}</span>
</t-for>

也可以写作

<t-for on="value, key in object">
<span>{{item.key}}: {{item.value}}</span>
</t-for>

object 暂不支持对象字面量

t-if

条件分支: <t-if on="condition">condition 应该是一个条件表达式

t-elif

条件分支 <t-elif on="condition">condition 应该是一个条件表达式

t-else

其它条件分支: <t-else>

t-with

设置作用域。

<t-with varName="a.b.c">
  {{varName}}
</t-with>

在此范围内,varName 等于 a.b.c 的值,varName 应该是一个合法的标识符。

此标签一般用于简写层次比较深的对象引用。

t-tree / t-children

渲染树结构

<t-tree on="tree as item">
  <div>{{item.title}}</div>
  <div>{{item.description}}</div>
  <div>
    <t-children />
  </div>
</t-tree>
  • tree 是上下文中的树结构变量,其应该是一个数组(array, 以支持多个根结点)
  • item 是每个节点在此作用域内的变量名称

另外还有一个配合使用的标签 <t-children field="children" />,此标签标记子节点应该渲染的位置

其 field 属性指定了子元素的字段名称,默认值为 children,即当字段名称为 children 时,属性 field 可省略。 t-children 的子元素会被直接丢弃。

t-html

提供直接渲染HTML的方法,当不使用此标签时,表达式的输出会被转义。

例:

<t-html>{{'<p></p>'}}</t-html>,输出 <p></p>

而在不使用 t-html 时: {{'<p></p>'}},输出 &lt;p&gt;&lt;/p&gt;

t-include

包含功能支持 <t-include file="./another.html" />

其属性 file 是一个相对文件路径,相对于当前文件的目录。

在 t-include 下,只允许出现 t-fill 作为其子项。

组合使用 t-include/t-fill/t-hole 可以实现布局模板的功能。

t-hole/t-fill

t-hole 在模板文件中预留 hole,以在模板文件被 include 时进行填充。

a.html

<div>
    <t-hole name="title">
      <div>默认内容</div>
    </t-hole>
    <t-hole></t-hole>
</div>

在上面的模板文件中,定义了两个 hole。一个具名的 title<t-hole name="title">,另一个是匿名的: <t-hole>

不论是具名还是匿名,相同名称只能声明一次。

b.html

<t-include file="a.html">
  <t-fill>填充匿名 hole</t-fill>
  <t-fill name="title">填充具名 hole: title</t-fill>
</t-include>

不论是具名还是匿名,相同名称只能填充一次。

{{}}

表达式支持: {{var}}{{obj.prop.value}}, `{{a - b}}

如果想要原样输出{{/}}符号,那么写作 {!{/}!},此时不会被解析,: {{/}}

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

wet-template 的相关资讯

还没有任何资讯

wet-template 的相关博客

Getting Your Feet Wet with the SWT StyledText W...

Copyright © 2001-2004 International Business Machines Corp. Eclipse Corner Article Getting Your Feet Wet with the SW...

转载:不可思议的Wet Circuits防水插座

不可思议的Wet Circuits防水插座爱…稀奇~{新鲜:科技:创意:有趣}这是一家名为Wet Circuits的公司新近推出的一款防水插座,和我...

Template

#include<bits/stdc++.h> #define reg register int #define il inline #define fi first #define se second #define mk...

org.thymeleaf.exceptions.TemplateInputException: Error resolving template "/ template might ...

异常现象:在本地打包部署完全没有问题,资源文件也都可以映射上,但是打包成jar包部署到服务器上时,就一直报异常,异常信息...

Consul Template

Consul Template

Consul-Template

Consul-Template简介 Consul-Template是基于Consul的自动替换配置文件的应用。在Consul-Template没出现之前,大家构建服务发现...

Consul-Template

Consul-Template Consul-Template简介 Consul-Template是基于Consul的自动替换配置文件的应用。在Consul-Template没出现之前,...

修改template

命令执行需要依赖Sense插件

wet-template 的相关问答

还没有任何问答,马上提问

评论 (0)

加载中
更多评论
0 评论
5 收藏
分享
返回顶部
顶部