Mustache.js使用笔记(内容属于转载总结)

1、Mustache的语法很简单,用两个大括号标记要绑定的字段即可,“{{}}”
Mustache主要的渲染方法为Mustache.render(),该方法有两个参数,第一个为要渲染的模版,
也就是例子中的template,第二个就是数据源也就是例子中的user对象
例:

$(function () {
var user = { name: "Olive", age: 23, sex: "girl" };
var template = "My name is {{name}} ,I'm {{age}} ,Sex is {{sex}}";
var view = Mustache.render(template, user);
$("#user_info").html(view);
})

 


2、view最终的结果是My name is Olive ,I'm 23 ,Sex is girl;
3、对象数组循环渲染展示

var users = { result: [
{ name: "Only", age: 24, sex: "boy" },
{ name: "for", age: 24, sex: "boy" },
{ name: "Olive", age: 23, sex: "girl" }
]};
var template = "<div><table cellpadding=0 cellspacing=0 class='tb' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{name}}</td><td>{{age}}</td><td>{{sex}}</td></tr>{{/result}}</table><div>";
var views = Mustache.render(template, users);
$("#users_info").html(views);

 


(1)对于对象数据Mustache也有其特殊的语法:{{#}}{{/}},如果所给定的数据源是一个对象数组,
则可以使用该语法,很方便的用来循环展示。
{{#}}{{/}}还有另外的一层意思就是判断是否为空,如果{{#}}中的值为null或false或undefined则其标记内的内容不展现。
有了判空的方法当然还有与之相反的方法{{^}},该方法表示的意思与{{#}}意思相反。
(2) 其中{{#}}标记表示从该标记以后的内容全部都要循环展示
{{/}}标记表示循环结束。这种情况多用于table行的展示。
注:在某些时候,我们要绑定的数据源中可能会有一些html标记,如果单纯的采用{{}}这种方式来绑定的话,默认的会将html标记转义。
为了解决防止绑定字段中的内容被转移我们可以这样做{{&}},这样就可以防止转义。

参考网址:http://blog.csdn.net/xuemoyao/article/details/17896203

转载于:https://www.cnblogs.com/dongxiaolei/p/5834021.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286409.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MAUI 自定义绘图入门

在2022的5月份&#xff0c;某软正式发布了 MAUI 跨平台 UI 框架。我本来想着趁六一儿童节放假来写几篇关于 MAUI 入门的博客&#xff0c;可惜发现我不擅长写很入门的博客。再加上 MAUI 似乎是为了赶发布日期而发布&#xff0c;只能勉强说能开发了&#xff0c;能用了。于是我就来…

C语言试题五之计算并输出给定数组(长度为9)中每相邻两个元素之平均值的平方根之和

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写函数…

【三维激光扫描】实验02:StonexSiScan新建项目、加载点云数据

文章目录 1. 新建工程2. 打开工程3. 加载点云1. 新建工程 打开StonexSiScan点云后处理软件,点击【新建】按钮。 选择工程存放路径,输入工程名称。 2. 打开工程 点击【打开】按钮。

eBPF 在云原生环境中的应用

端午假期&#xff0c;我翻译了 OReilly 的报告《什么是 eBPF》&#xff0c;其中我觉得第五章「云原生环境中的 eBPF」解答了我心中的很多疑惑&#xff0c;比较不错&#xff0c;分享给大家。下面是第五章译文。《什么是 eBPF》中文版封面近年来&#xff0c;云原生应用已呈指数级…

使用HtmlAgilityPack抓取网页数据

XPath路径表达式&#xff0c;主要是对XML文档中的节点进行搜索&#xff0c;通过XPath表达式可以对XML文档中的节点位置进行快速定位和访问&#xff0c;html也是也是一种类似于xml的标记语言&#xff0c;但是语法没有那么严谨&#xff0c;在codeplex里有一个开源项目HtmlAgility…

C语言试题六之使字符串的前导*号不得多于n个;若多于n个,则删除多于的*号;若少于或等于n个,则什么也不做。字符串中间和尾部的*号不删除。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写函数…

QT坑爹的事..

昨晚用QT写了个网络小程序&#xff0c;布局怎么都出不来add->widge()无效&#xff0c;原来因为在QMainWindow的基类下 需要人工添加一个 widge new QWidge() this->setCentralWidget(widget);最后在 widget->setLayout(mainLayout);才行 dialog和widge的基类 则没有任…

企业有了程序员为什么还要用 低代码/无代码

一、备受“争议”的无代码/低代码开发 在看这篇内容时&#xff0c;我们要知道&#xff0c;技术无时无刻不在进行发展&#xff0c;IT技术更是如此&#xff0c;快速的技术更新使得程序员在进行应用开发时效率更高&#xff1b;我记得在十多年前&#xff0c;开发一个普通的 HTML 页…

【三维激光扫描技术】原理、方法及实验图文教程目录

《三维激光扫描技术》专栏讲述目前最先进、最流行的三维激光技术&#xff0c;包括三维激光扫描技术原理&#xff0c;三维测距原理&#xff0c;国内外三维扫描设备&#xff0c;点云特点&#xff0c;三维建模&#xff0c;三维激光优势、应用领域&#xff0c;应用技术案例等。 文章…

std::thread 不 join

std::thread 构造之后 使用 detach。就可以了

求最长回文串

Given a string S, find the longest palindromic substring in S. You may assume that the maximum length of S is 1000, and there exists one unique longest palindromic substring. 转载于:https://www.cnblogs.com/yangscode/p/5017527.html

C语言试题七之将函数字符串中的前导*号全部删除,中间和尾部的*号不删除。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 规定输入字…

Dapr 1.7 之 Unix Domain socket 他来了

Unix Domain socketA UNIX socket is an inter-process communication mechanism that allows bidirectional data exchange between processes running on the same machine.Unix Domain Socket&#xff08;后面统一简称 UDS&#xff09;是在socket的框架上发展出一种IPC&…

实训三(cocos2dx 3.x 打包apk)

上一篇文章《实训二&#xff08;cocos2dx 2.x 打包apk&#xff09;》简单的讲述的利用cocos2dx 2.x引擎在windows平台上打包apk的方法与过程&#xff0c;本文将介绍3.x版本引擎&#xff0c;如何打包apk的问题。 首先&#xff0c;Cygwin在3.x版本引擎上已经用不到了&#xff0c;…

学习SQL数据查询,这一篇就够了!

【任务概述】 建立数据库的目的主要是为了对数据库进行操作,以便能够从中提取有用的信息,而数据查询则是数据库操作的核心。 扩展阅读:《学习SQL数据更新,这一篇就够了!》 文章目录 一、SQL简单查询1. Select查询语句2. 无条件查询3. 单条件查询4. 多条件查询5. 分组查询6…

网页精美动效/动画制作 按钮鼠标悬浮动效基础 01《炫彩网页 iVX 无代码动效/动画制作》

编辑器地址&#xff1a;https://editor.ivx.cn/ 一、准备工作 进入编辑页后&#xff0c;选择其中一种应用类型创建应用&#xff0c;在此以相对应用作为示例&#xff1a; 创建好应用后在此选择对应的屏幕作为示例演示&#xff0c;在此选择电脑屏幕作为对应的大小&#xff1a…

Java并发编程 - Executor,Executors,ExecutorService, CompletionServie,Future,Callable

一、Exectuor框架简介 Java从1.5版本开始&#xff0c;为简化多线程并发编程&#xff0c;引入全新的并发编程包:java.util.concurrent及其并发编程框架&#xff08;Executor框架&#xff09;。 Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类&a…

C语言试题八之计算下列级数和,和值由函数值返回 S=1+x+x^2/2! + x^3/3!+…x^n/n!

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 计算下列级…

with管理文件操作

为了避免打开文件后忘记关闭&#xff0c;可以通过管理上下文&#xff0c;即&#xff1a; with open(log,r) as f: f.write(xxxxxx)f.readlines()...................如此方式&#xff0c;当with代码块执行完毕时&#xff0c;内部会自动关闭并释放文件资源。以往我们打开…