`
zccst
  • 浏览: 3315611 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

mustache.js使用基本(二)sections

阅读更多
作者:zccst

本文记录基本使用二,主要讲sections。

基本格式:{{#person}} {{/person}}


1,当person是null, undefined, false, 0, NaN, "", [], 空列表时不渲染


2,当person不空时渲染一次或多次。如果其中某一些为空,则改行略过,其他行正常。
var template = '{{#beatles}}* {{name}} <br/>{{/beatles}}';
var obj = {
    "beatles": [
        { "firstName": "John", "lastName": "Lennon" },
        { "firstName": "Paul", "lastName": "McCartney" },
        { "firstName": "George", "lastName": "Harrison" },
        { "firstName": "Ringo", "lastName": "Starr" }
    ],
    "name": function () {
        console.log(this,this===obj);//结论:由于循环的是beatles,所以this指向的是beatles,而不是obj。
        return this.firstName + " " + this.lastName;
    }
}

var rendered = Mustache.render(template,obj);
$('#target').html(rendered);


3,相反,就是输出空,仅在 section标签是null, undefined, false, 空list时
用{{^section}} 替换 {{#section}}
var template = '{{#repos}}<b>{{name}}</b>{{/repos}} {{^repos}}No repos :({{/repos}}';
var obj = {
"repos": []
}
var rendered = Mustache.render(template,obj);
$('#target1').html(rendered);



4,特殊情况:数组,里面每一项都是字符串时,可以用点代替
var template = '{{#musketeers}}* {{.}} <br/>{{/musketeers}}';
var obj = {
    "musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}

var rendered = Mustache.render(template,obj);
$('#target').html(rendered);



5,function
var template = '{{#bold}}Hi {{name}}.{{/bold}}';
var obj = {
    "name": "Tater",
    "bold": function () {
        return function (text, render) {
            return "<b>" + render(text) + "</b>";//text是Hi {{name}}.render是原生函数
        }
    }
}

var rendered = Mustache.render(template,obj);
$('#target').html(rendered);

<div id="target">Loading...</div>



如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    mustache.js v2.2.1强大的Javascript模板引擎

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用。 本资源包含了mustache.js 、mustache.min.js包 版本号v2.2.1

    mustache.js javascript模板引擎

    **Mustache.js:JavaScript模板引擎详解** Mustache.js,又称为mustache,是一款轻量级且功能强大的模板引擎,专为JavaScript设计。它遵循“逻辑less”的理念,将视图和数据分离,使得代码更易于理解和维护。...

    前端项目-mustache.js.zip

    **Mustache.js:无逻辑的JavaScript模板引擎** Mustache.js 是一个流行的开源JavaScript库,它遵循无逻辑模板语言——Mustache模板语法。这种语法强调在视图层与业务逻辑之间保持分离,使得开发者可以更专注于数据...

    使用Mustache.js实现的asp.net mvc客户端模版的例子

    在这个例子中,我们将探讨如何使用JavaScript库Mustache.js在ASP.NET MVC项目中实现客户端模板。 Mustache.js是一个无逻辑的模板语言,遵循“逻辑less”的原则,意味着它不包含任何内建的控制流或条件语句。它的...

    mustache.js

    客户端模板技术。增加html代码的可维护性。高效转换Html代码。

    mustache.js:使用JavaScript中的{{mustaches}}进行最小模板化

    mustache.js-带有JavaScript的无逻辑{{... 您可以在任何可以使用JavaScript的地方使用mustache.js呈现胡子模板。 这包括Web浏览器,服务器端环境(例如 )和视图。 mustache.js随附对模块API,API(AMD)和。 除了

    前端模板引擎Mustache教程.zip

    2. "Mustache.js模板引擎使用 - 山外人家 - CSDN博客":这篇文章详细介绍了如何在JavaScript项目中集成和使用Mustache.js,包括基本语法和高级特性的应用。 3. "Javascript模板引擎mustache.js详解 - 流云诸葛 - ...

    mustache.php, 在PHP中,mustache 实现.zip

    mustache.php, 在PHP中,mustache 实现 Mustache.phpPHP中的一个 mustache 。 用法一个简单的例子:&lt;?php$m = new Mustache_Engine;echo $m-&gt;render('He

    mustache_test:只是测试 mustache.js 库

    开发者可能通过这些文件来了解 Mustache.js 的用法,以及如何将其与其他 JavaScript 库结合使用。 总之,mustache_test 是一个用于测试 mustache.js 模板引擎的项目,它突显了 Mustache.js 在轻量级数据渲染中的...

    探究Javascript模板引擎mustache.js使用方法

    主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用,感兴趣的小伙伴们可以参考...

    详解Javascript模板引擎mustache.js

    **JavaScript 模板引擎 Mustache.js 详解** Mustache.js 是一个轻量级且功能强大的JavaScript模板引擎,它遵循无逻辑模板语言(Logic-less templates)的设计原则,这意味着模板引擎本身不包含任何条件判断或循环...

    前端项目-requirejs-mustache.zip

    3. 可能存在一个`scripts`或`js`目录,包含了项目中的JavaScript代码,这些代码会使用RequireJS来组织和加载模块。 4. `index.html`或其他HTML文件作为项目的入口,其中包含了加载 RequireJS 和启动应用的脚本。 5. ...

    mustache.js:用JavaScript中的{{mustaches}}进行最小模板化-开源

    mustache.js是JavaScript中的mustache模板系统的零依赖实现。 小胡子是一种无逻辑的模板语法。 它可以用于HTML,配置文件,源代码-任何东西。 它通过使用散列或对象中提供的值在模板中扩展标签来工作。 我们称其为...

    mustache-wax:Wax是Mustache.js的扩展,它可以在类似Angular过滤器的样式中使用Mustache表达式内的格式化程序

    小胡子蜡 Wax是Mustache.js的扩展,它可以在类似Angular过滤器的样式中使用Mustache表达式内的格式化程序。 此扩展要求存在String.prototype.trim()方法,您可以从获取Polyfill:安装npm install @jvitela/...

    vue源码探究辅助工具mustache.js

    帮助更多希望读懂vue源码的朋友们理解mustache工具

    yii2-mustache.js:用于 JavaScript 的小胡子最小模板的资产包

    Yii2 mustache.js Yii2-扩展 该项目是根据的条款分发的。 安装 安装此扩展的首选方法是通过 。 要么跑 ...或添加 "xfg/yii2-mustache.js": "*" 到composer.json文件的 ... 'xfg\mustachejs\MustachejsAsset', ];

    带有Mustache.js的ASP.NET(Web表单/ MVC)中的客户端模板

    提供的文件中,"MVC_Application_Mustache.zip"和"Web_Form_Application_Mustache.zip"包含示例代码,演示了如何在ASP.NET Web窗体和MVC项目中使用Mustache.js实现客户端模板。"Client-Side-Template-in-ASP-...

    mustache-pro:增强版的Mustache.js,支持ifincludefilterrenderer

    使mustache.js更易于开发人员使用。 技术支持 array index : array index第一个/最后一个/索引/中间 if {{#if(a == 1 || b == 3 && c == 3)}} blabla {{/ if(a == 1 || b == 3 && c == 3)}} if {{##(a!= 1...

Global site tag (gtag.js) - Google Analytics