js模板mustache

最新推荐文章于 2024-08-09 08:27:01 发布

zccst

最新推荐文章于 2024-08-09 08:27:01 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

分类专栏：模板基础文章标签： mustache

本文链接：https://blog.csdn.net/zccst/article/details/84602894

模板基础专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了JavaScript模板的基本概念，并介绍了三种不同类型的模板实现方式：html文件模板、js变量模板和script片段模板。同时，文章还详细解释了Mustache模板语言的变量表示方法、数组节点渲染及函数作为模板变量的应用。最后，提供了如何使用模板渲染数据生成展示代码的实例。

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

作者：zccst

模板：

1）js模板可以是一个html文件。
模板文件.html
<h1>Hello {{name}}, it is {{timeNow}}.</h1>

2) js模板可以是一个值是html代码的js变量
var template = "<p>Hello {{name}}, it is {{timeNow}}.</p>";

3) js模板可以是一个script片段
<script id="tpl-greeting" type="text/html">
<dl>
<dt>Name</dt>
<dd>{{name}}</dd>
<dt>Time</dt>
<dd>{{timeNow}}</dd>
</dl>
</script>

mustache模板语言。
变量表示：变量标记将当前上下文的变量通过模板渲染，如果当前上下文不存在该变量，则渲染为空串。

默认变量会被经过 HTML 编码处理，如需显示原始值，用三个大括号或者在模板标记的初始加入 & 符号。
{{变量名 }} ，{{{变量名 }}}

如果当前键为基本或对象，则渲染一次，如果为数组，则渲染数组长度次数。节点以 # 号开始，以 / 结束。
模板：{{#stooges}}<b>{{name}}</b><br>{{/stooges}}"
json: {"stooges":[{"name":"王升"},{"name":"梁文彦"},{"name":"石洋"}]};

2.填充数组节点以 # 号开始，以 / 结束,则渲染数组长度次数。
模板{{#数组}}{{数组内的key}}{{/数组}}
var template = "{{#stooges}}<b>{{name}}</b><br>{{/stooges}}";var view = {"stooges":[{"name":"王升"},{"name":"梁文彦"},{"name":"石洋"}]}

3.函数作为模板的变量,该函数会在当前列表的每一个元素的上下文迭代执行。


var template = "{{#beatles}}* {{name}}<br/>{{/beatles}}";
var view = {
    "beatles": [
        { "firstName": "John", "lastName": "Lennon" },
        { "firstName": "Paul", "lastName": "McCartney" },
        { "firstName": "George", "lastName": "Harrison" },
        { "firstName": "Ringo", "lastName": "Starr" }],
    "name": function () {
        return this.firstName + " " + this.lastName;
    }
};

如果节点键的值为函数，注意该函数在执行时的两个参数，第一个为该节点变量的直接值，第二个为函数，其执行的上下文对应视图对象。


var template = "{{#bold}}Hi {{name}} {{lastName}}.{{/bold}}";
var view = {
    "name": "John",
    "lastName": "Lennon",
    "bold": function () {
        return function (text, render) {return "<b>" + render(text) + "</b>";}
    }
}

mustache模板使用
模板变量在上下找模板变量需要的数据进行填充。json数据的key跟模板的变量对应就会填充。模板变量和json的key对应不上就不填充。生成展示代码没填充的变量不显示

用Mustache.render(template, view)方法填充数据生成展示代码
view:为json数据，作为模板上下文
template:为模板对象

//模板
var template = "<p>Hello {{name}}, it is {{{ignore name}}}.it is {{&name}}</p>";

//数据
var date = new Date();
var view = {name: "<b>Jonny</b>",timeNow: date.getHours() + ':' + date.getMinutes() };

使用模板文件要用该方法填充数据生成展示代码


$.get('模板文件', function(templates) {
    var template = $(templates).html();
    $Mustache.render(template, view);
});

如果您觉得本文的内容对您的学习有所帮助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]