钻探Javascript模板引擎mustache,js使用格局

2019-09-02 13:51 来源:未知

我们将为大家详解Mustache.js轻量级JavaScript模版引擎使用格局。

研究Javascript模板引擎mustache.js使用办法,mustache模板引擎

我们将为我们详解Mustache.js轻量级JavaScript模版引擎使用情势。

粗略示例

function show(t) {
 $("#content").html(t);
}
var view = {
 title: 'YZF',
 cacl: function () {
 return 6 + 4;
 }
};
$("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));

能够很明朗的看看Mustache模板的语法,只需求使用{{和}}包括起来就足以了,里面放上对象的称号。

经过本示例也得以见见,若是钦点的习性为函数的时候,不会输出函数里面包车型大巴内容,而是先实践函数,然后将赶回的结果展现出来。

不转义HTML标签

var view = {
 name: "YZF",
 company: "<b>ninesoft</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

通过那个示例能够看到Mustache私下认可是会将值里面包车型地铁html标识进行转义的,可是不经常大家并没有须要。

所以那边我们能够使用{{{和}}}饱含起来,可能是{{和}}富含,那么Mustache就不会转义里面的html标志。

绑定子属性的值

var view = {
 "name": {
 first: "Y",
 second: "zf"
 },
 "age": 21
};
show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

深信不疑看到第2个示范的时候,就能够有人想到能否绑定子属性,借使您奋力看下去了。那么恭喜你,今后便是缓和你的须求的情势,仅仅只须求经过.来行使子属性就可以。

条件式选拔是不是渲染钦赐部分

var view = {
 person: false
};
show(Mustache.render("eff{{#person}}abc{{/person}}", view));

标题三翻五次随地,假使我们还亟需可以基于大家给的值,决定是或不是渲染有个别部分,那么今后就能够化解这几个标题,当然还要指示的正是不单是false会导致不渲染钦命部分。

null,空数组,0,空字符串同样有效。语法上面相比较轻松,就是选择{{#key}} ... {{/key}}来决定中间的开始和结果。

循环输出

var view = {
 stooges: [
 { "name": "Moe" },
 { "name": "Larry" },
 { "name": "Curly" }
 ]
};
show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));

只是学会上边的格局,半数以上地方你都消除了,不过依然会现身麻烦的地点,正是循环输出,若是您二个二个写,相信会很烦躁,当然Mustache不会让我们失望,它也付出了哪些循环输出的措施,这里是将三个由对象组成的数组输出,如果大家输出的是数组,就须要动用{{.}}来代替{{name}}。

巡回输出钦点函数管理后归来的值

var view = {
 "beatles": [
 { "firstname": "Johh", "lastname": "Lennon" },
 { "firstname": "Paul", "lastname": "McCartney" }
 ],
 "name": function () {
 return this.firstname + this.lastname;
 }
};
show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));

循环输出是有了,然而大家还想前期进行加工。那么这几个完全符合你的内需,因为Mustache会将数组中的值传递给你的函数,输出你函数重返的值。这里大家得以看来最外层是数组,只要在里面使用函数那么外层的数组就能够作为这一个函数的参数字传送递进去。

自定义函数

var view = {
 "name": "Tater",
 "bold": function () {
 return function (text, render) {
   return render(text) + "<br />";
 }
 }
}
show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));

地点大家都以用的变量作为节,那么大家前几天用函数作为节,会有怎样作用啊。

它会调用大家函数重返的函数,将节中间的原始字符串作为第二个参数,暗中同意的解释器作为第叁个参数,那么大家就足以自行加工。

反义节

var view = {
 "repos": []
};
show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));

上边大家也用节,然而偏偏只好选拔是不是输出有些部分。所以那边大家弥补一下。

假定大家利用了{{^和}}来定义节的话,那么那个部分只会在内部的值为空,null,空数组,空字符串的时候才会来得。那么大家就足以实现了if else的职能了。

一些模板

var view = {
 names: [
 { "name": "y" },
 { "name": "z" },
 { "name": "f" }
 ]
};
var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
var name = "<b>{{name}}</b>";
show(Mustache.render(base, view, { user: name }));

Mustache就算节约了相当多时间,可是大家定义了过多模板,不过相互之间不能够相互嵌套使用,也会导致麻烦。

就此这里大家还要介绍怎么着定义部分模板,用来在任何模板里面使用,这里运用其他模板的点子唯有是{{>templetename}}。

最大的两样就是Mustache.render方法有了第四个参数。

预编写翻译模板

Mustache.parse(template);
//其他代码
Mustache.render(template,view);

模板既然有实惠,也可以有坏处。就是编写翻译模板需求时日,所以在大家已知会动用有些模板的前提下,大家能够事先编写翻译好这几个模板,以便前边的使用。

梦想本文所述对我们学习抱有帮忙。

简短示例

您可能感兴趣的篇章:

  • javascript轻量级模板引擎juicer使用指南
  • PHP针对常规模板引擎中与CSS/JSON争辨的消除方法
  • node.js 使用ejs模板引擎时后缀换到.html
  • 教您利用javascript轻巧写一个页面模板引擎
  • 详解Javascript模板引擎mustache.js

大家将为大家详解Mustache.js轻量级JavaScript模版引擎使用办法。 轻松示例 function s...

function show(t) {
 $("#content").html(t);
}
var view = {
 title: 'YZF',
 cacl: function () {
 return 6 + 4;
 }
};
$("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));

能够很醒目标来看Mustache模板的语法,只要求采纳{{和}}包括起来就能够了,里面放上对象的名目。

透过本示例也得以观察,倘诺内定的性质为函数的时候,不会输出函数里面包车型大巴原委,而是先进行函数,然后将回来的结果显示出来。

不转义HTML标签

var view = {
 name: "YZF",
 company: "<b>ninesoft</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

通过那几个示例能够见见Mustache私下认可是会将值里面包车型大巴html标识实行转义的,可是一时大家并没有要求。

就此这边大家得以利用{{{和}}}满含起来,或然是{{和}}包含,那么Mustache就不会转义里面包车型大巴html标志。

绑定子属性的值

var view = {
 "name": {
 first: "Y",
 second: "zf"
 },
 "age": 21
};
show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

深信不疑看到第一个示范的时候,就能够有人想到能否绑定子属性,假使您努力看下来了。那么恭喜你,未来正是缓慢解决您的急需的措施,仅仅只须要经过.来行使子属性即可。

条件式选取是不是渲染钦点部分

var view = {
 person: false
};
show(Mustache.render("eff{{#person}}abc{{/person}}", view));

标题三翻五次不断,要是我们还供给能够基于大家给的值,决定是否渲染有些部分,那么以往就能够化解这么些标题,当然还要提示的就是不单是false会导致不渲染内定部分。

null,空数组,0,空字符串一样有效。语法上边比较容易,正是采用{{#key}} ... {{/key}}来调整中间的内容。

巡回输出

var view = {
 stooges: [
 { "name": "Moe" },
 { "name": "Larry" },
 { "name": "Curly" }
 ]
};
show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));

单单学会上边的方法,大多数地点你都化解了,不过照旧会油不过生麻烦的地点,正是循环输出,固然你一个多个写,相信会很窝囊,当然Mustache不会让我们失望,它也交由了如何循环输出的艺术,这里是将叁个由对象组成的数组输出,假如大家输出的是数组,就须求选拔{{.}}来代替{{name}}。

循环输出钦命函数管理后归来的值

var view = {
 "beatles": [
 { "firstname": "Johh", "lastname": "Lennon" },
 { "firstname": "Paul", "lastname": "McCartney" }
 ],
 "name": function () {
 return this.firstname + this.lastname;
 }
};
show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));

循环输出是有了,可是大家还想前期举行加工。那么这么些完全符合你的须要,因为Mustache会将数组中的值传递给您的函数,输出你函数重返的值。这里大家得以看出最外层是数组,只要在里边使用函数那么外层的数组就能够作为那些函数的参数字传送递进去。

自定义函数

var view = {
 "name": "Tater",
 "bold": function () {
 return function (text, render) {
   return render(text) + "<br />";
 }
 }
}
show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));

上边大家都以用的变量作为节,那么大家明日用函数作为节,会有何效劳呢。

它会调用我们函数重临的函数,将节中间的原始字符串作为第贰个参数,暗中同意的解释器作为第贰个参数,那么大家就足以活动加工。

反义节

var view = {
 "repos": []
};
show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));

上面大家也用节,然而偏偏只能选取是或不是输出有个别部分。所以那边我们弥补一下。

若是大家采用了{{^和}}来定义节的话,那么那些片段只会在个中的值为空,null,空数组,空字符串的时候才会来得。那么我们就足以兑现了if else的机能了。

有些模板

var view = {
 names: [
 { "name": "y" },
 { "name": "z" },
 { "name": "f" }
 ]
};
var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
var name = "<b>{{name}}</b>";
show(Mustache.render(base, view, { user: name }));

Mustache固然节约了无数年华,不过大家定义了众多模板,可是互相之间不恐怕相互嵌套使用,也会导致麻烦。

故此这里我们还要介绍如何定义部分模板,用来在别的模板里面使用,这里运用别的模板的艺术独有是{{>templetename}}。

最大的例外就是Mustache.render方法有了第多个参数。

预编写翻译模板

Mustache.parse(template);
//其他代码
Mustache.render(template,view);

模板既然有好处,也可能有缺欠。正是编写翻译模板须要时刻,所以在大家已知会采纳有个别模板的前提下,大家得以优先编写翻译好那么些模板,以便前面的运用。

指望本文所述对大家学习抱有援助。

你恐怕感兴趣的篇章:

  • Node.js的Web模板引擎ejs的入门使用教程
  • 详解Javascript模板引擎mustache.js
  • 教您采取javascript轻易写三个页面模板引擎
  • node.js 使用ejs模板引擎时后缀换到.html
  • 浅谈轻量级js模板引擎simplite
  • 高品质JavaScript模板引擎完结原理详解
  • laytpl 精致神奇的JavaScript模板引擎
  • PHP针对常规模板引擎中与CSS/JSON争持的搞定措施
  • javascript轻量级模板引擎juicer使用指南
  • 详解Js模板引擎(TrimPath)
TAG标签:
版权声明:本文由990888藏宝阁发布于网络应用,转载请注明出处:钻探Javascript模板引擎mustache,js使用格局