[JS Render] JS Render 模板语法

最新推荐文章于 2025-07-08 00:35:22 发布

amos_tl

最新推荐文章于 2025-07-08 00:35:22 发布

阅读量591

点赞数

本文介绍了模板引擎的基本语法，包括变量获取、HTML转义、模板引用、数组与对象遍历、条件判断、成员显示、标签自定义、上下文访问、异常处理等。同时还涉及了自定义转换器和工具类的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.
{{:key}}
获取值

~root：　　　顶级对象
#item：　　当前对象
#index：　　当前索引

2.
{{>untrustedValue}}
获取HTML编码后的值

3.
{{include tmpl=... /}}
引用模板

4.
{{for ...}}
数组遍历

5
{{props billing.address}}
{{>key}}: {{>prop}}
{{/props}}
对象遍历

6
{{if firstExpression}}
render this if the firstExpression is true
{{else secondExpression}}
else render this if the secondExpression is true
{{else}}
else render this
{{/if}}

{{for members}}
Member Name: {{:name}}
{{else}}
There are currently no members...
{{/for}}

{{tabs tabCaption="First Tab"}}
first tab content
{{else tabCaption="Second Tab"}}
second tab content
{{/tabs}}

条件分支

7.
{{*: ...}}
执行JS代码，当$.views.settings.allowCode(true);时．

{{*: ...}}
执行JS代码并输出结果，当$.views.settings.allowCode(true);时．

8.
{{!-- ... --}}
注释

9.
自定义标签
function renderBoldP(value) {
return "<p><b>" + value + "</b></p>";
}

$.views.tags("boldp", renderBoldP);

10.
～
访问上下文

～root

11.
自定义转换器
$.views.converters("upper", function(val) {
// Convert data-value or expression to upper case
return val.toUpperCase();
});

{{upper:...}}

12.
{{:address.street onError="Address unavailable"}}
异常处理

13.
全局工具类
var myHelpers = {format: myFormatFunction};

$.views.helpers(myHelpers);
{{:~format(name, true)}}

模板级工具类
var myHelpers = {format: myFormatFunction};

$.templates({
mytmpl: {
markup: "#personTemplate",
helpers: myHelpers
}
});
{{:~format(name)}}
{{:~format(name, true)}}

$.views.helpers(...)