同步操作将从 OpenHarmony-SIG/jmustache 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
jmustache 是mustache模板系统的零依赖实现,通过使用散列或对象中提供的值来扩展模板中的标签。
npm install @ohos/jmustache --save
OpenHarmony npm环境配置等更多内容,请参考 如何安装OpenHarmony npm包 。
解析方式主要使用Mustache.render
方法
data: 以下大部分示例使用下方代码块数据,如有额外数据会单独列出
name: "cai",
msg: {
sex: "male",
age: "66",
hobby: "reading"
},
focus: "<span>sleep<span>",
subject: [" Ch ", " En ", " Math ", " physics "],
moreInfo: []
最基本的标签类型是一个简单的变量。{{name}}
标签呈现name
当前上下文中键的值。如果没有这样的键,则不会渲染任何内容。
默认情况下,所有变量都是 HTML 转义的。如果要呈现未转义的 HTML,请使用三重胡须:{{{name}}}
。您还可以使用&
取消转义变量。
如果您想全局更改 HTML 转义行为(例如,更改为模板非 HTML 格式),您可以覆盖 Mustache 的转义函数。例如,要禁用所有转义:Mustache.escape = function(text) {return text;};
.
如果您{{name}}
不希望被解释为 mustache 标记,而是希望{{name}}
在输出中完全显示,则必须更改然后恢复默认分隔符。有关详细信息,请参阅自定义分隔符部分。
输入:
NAME:{{name}}
EMPTY:{{nothing}}
{{focus}}
{{{focus}}}
{{&focus}}
输出:
NAME:cai
EMPTY:
<span>sleep<span>
<span>sleep<span>
<span>sleep<span>
.
可以用于访问对象属性
输入:
SEX:{{msg.sex}};AGE:{{msg.age}}
输出:
SEX:male;AGE:66
块根据当前上下文中键的值呈现文本块零次或多次。
一个块以#
开头,以\
结尾。也就是说,{{#subject}}
开始一个subject
部分,同时{{/subject}}
结束它。两个标签之间的文本称为该部分的“块”。
该部分的行为由键的值决定。
如果subject
键不存在,或存在且值为null
, undefined
, false
, 0
, 或NaN
, 或为空字符串或空列表,则不会渲染块。
输入:
{{#msg}}SEX:{{sex}};AGE:{{age}};HOBBY:{{hobby}}{{/msg}}
MOREINFO:{{#moreInfo}}cannot display{{/moreInfo}}
输出:
SEX:male;AGE:66;HOBBY:reading
MOREINFO:
###非空列表
如果persons
键存在且不是null
, undefined
, 或false
, 并且不是空列表,则该块将被渲染一次或多次。
当值是一个列表时,该块为列表中的每个项目呈现一次。每次迭代时,块的上下文都设置为列表中的当前项。通过这种方式,我们可以遍历集合。
data:
"persons": [
{ "name": "CAI" },
{ "name": "LIU" },
{ "name": "ZHOU" }
]
输入:
{{#persons}}
{{name}}
{{/persons}}
输出:
CAI
LIU
ZHOU
.
可以遍历字符串数组
输入
{{#subject}}{{.}}{{/subject}}
输出
Ch En Math physics
解析的数据不仅可以为值,也可以是一个函数
data:
fun: function () {
return 2 + 4;
}
输入:
FUN:{{fun}}
输出
FUN:6
{{^section}}
与{{#section}}
相反。仅当该部分的标记的值为null
, undefined
, false
, falsy或空列表时,才会呈现倒置部分的块。
if
输入:
EMPTY-ARR:{{#moreInfo}}empty-arr{{/moreInfo}}\nARRAY: {{#subject}}arr {{/subject}}\n
输出:
EMPTY-ARR:
ARRAY:arr arr arr arr
else
输入:
EMPTY-ARR:{{^moreInfo}}empty-arr{{/moreInfo}}\nARRAY: {{^subject}}arr {{/subject}}\n
输出:
EMPTY-ARR:empty-arr
ARRAY:
以 !
开头会被忽略
输入:
{{!name}}.
输出:
.
>
可以表示一个模块,把复杂的模板可以拆出多个简单的模块来便于使用
额外data:
template: "{{#msg}}SEX:{{sex}};AGE:{{age}};HOBBY:{{hobby}}{{/msg}}"
输入:
NAME:{{name}}\nINFO:\n{{>template}}
输出:
NAME:cai
INFO:
SEX:male;AGE:66;HOBBY:reading
可以通过修改Mustache的tags来自定义分隔符,也可以在解析时直接使用
输入
Mustache.render(NAME:{{name}}\nNAME:<%name%>\n, this.data, {}, ['<%', '%>'])
输出:
NAME:{{name}}
NAME:cai
默认情况下,当 mustache 第一次解析模板时,它会将解析保存在缓存中。下次它看到相同的模板时,它会跳过解析步骤并更快地呈现模板。如果您愿意,可以使用Mustache.parse
.
Mustache.render()
Mustache.parse
mustache.clearCache()
支持 OpenHarmony API version 8 及以上版本。
|---- Jmustache
| |---- entry # 示例代码文件夹
| |---- Jmustache # Jmustache库文件夹
| |---- index.ets # 对外接口
| |---- src
| |---- ets
| │---- components
| |---- mustache.ets # 用于解析模板
| |---- README.md # 安装使用方法
使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发PR 。
本项目基于 MIT License ,请自由地享受和参与开源。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。