mustache 模板使用

//一 ,基本使用

<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.10.2.min.js"></script> <script src="mustache.min.js" ></script> <style> ul, li {list-style: none; padding: 30px; }</style></head><body οnlοad="loadUser()">

</body><script>　　function loadUser() {    　　var template = $('#template').html(); 　　Mustache.parse(template); // optional, speeds up future uses 　　var rendered = Mustache.render(template, {name: "Luke",age:34}); 　　$('#target').html(rendered);　　}

</script></html>

//2,对象循环使用

<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.10.2.min.js"></script> <script src="mustache.min.js" ></script> <style> ul, li {list-style: none; padding: 30px; }</style></head><body οnlοad="loadUser()">

<ul id="target"></ul><script id="template" type="x-tmpl-mustache"> {{#listData}} {{name}} {{/listData}}</script>

</body><script>

function loadUser() {var obj = [          {"name": "名称1", "id": 1, "age": "23", }, {"name": "名称2", "id": 2, "age": "23", }, {"name": "名称3", "id": 3, "age": "23", } ]; var template = $('#template').html(); Mustache.parse(template); // optional, speeds up future uses var rendered = Mustache.render(template, {"listData":obj});

 $('#target').html(rendered); }

</script></html>

转载于:https://www.cnblogs.com/zhaozhenzhen/p/8795891.html

mustache 模板使用相关推荐

mustache模板技术
一.简介 Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Ho ...
Mustache 模板引擎
Mustache 模板引擎 1.Mustache简介 mustache.js 是一个简单强大的 JavaScript 模板引擎.使用mustache前需要通过script标签引入它的js文件,然后 ...
PHP中如何用switch制作页面,php – 如何在Mustache模板中使用switch case？
我在Core PHP中使用Mustache模板将PHP页面转换为模板.现在我想在模板中使用switch case,如: switch ($gift_card['FlagStatus']) { case ...
学习Vue的mustache语法-mustache模板引擎
学习地址 : https://www.bilibili.com/video/BV1EV411h79m?vd_source=a81826692f4afea80764f4048dc1ae0a 代码地址 : ...
Vue源码之mustache模板引擎(二) 手写实现mustache
Vue源码之mustache模板引擎(二) 手写实现mustache mustache.js 个人练习结果仓库(持续更新):Vue源码解析 webpack配置可以参考之前的笔记Webpack笔记安 ...
Vue源码之mustache模板引擎(一)
Vue源码之mustache模板引擎(一) 个人练习结果仓库(持续更新):Vue源码解析抽空把之前学的东西写成笔记. 学习视频链接:[尚硅谷]Vue源码解析之mustache模板引擎模板引擎是什么 ...
【Vue源码】mustache模板引擎 - 基本使用 - 底层原理 - 手写实现
文章目录 1. 模板引擎的介绍 1.1 模板引擎是什么? 1.2 模板引擎是怎么来的?(发展历史) 1. 使用原生的DOM操作 2. 使用数组中的join方法 3. 使用ES6反引号的方法 2. mu ...
mustache模板技术简介
mustache模板技术简介一.简介 Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 J ...
Mustache模板技术，一个比freemarker轻量级的模板引擎
一.初识Mustache 同样也是看Dropwizard才知道这个东西的,以前一直是知道诸如freemarker这样的模板引擎,这个是头一次听说,但是听周围的朋友说最早这个东西是出自于JS的,Drop ...
Mustache 模板教程
Mustache 模板教程本文学习Mustache 模板,并使用Java api动态生成HTML内容.Mustache是创建动态内的无逻辑模板引擎,如HTML,配置文件等. 1. 概述 Mustac ...

mustache 模板使用

mustache 模板使用相关推荐

最新文章

热门文章