h5使用script type=“text/html“构建模板，动态改变模板内容

目前本人知道的模块插件就2个，一个是：template_js，另外一个是Mustache
直接通过静态资源托管库在页面中引入就好
注意：以下内容只是用案例，生产环境请根据实际情况更改相应内容
1、template的使用方法

<!--引入template-->
<script crossorigin="anonymous" integrity="sha512-KsDmkrHAdjPgNO8np1KW4xQV74Zd9dDmE7L29kq7tMoVo9QFHDrlBv8y38Lw3hTAoayqGykBPJ2QHfWqBhX7cw==" src="https://lib.baomitu.com/template_js/0.8.0/template.min.js"></script>
<!--template模板渲染位置-->
<div id="templatelist"></div>   //要渲染的位置<script type="text/html" id="template1"><ul><% for(var i = 0;i < list.length;i++){ %><li><p><%= list[i].name %></p><p><%= list[i].sex %></p></li> <% } %></ul>
</script><script>// 准备好的数据源，可以是通过网络获取的json数据，也可以是通过ajax从后台拿到的数据var data = [{name:"张三",sex:"女"},{name:"李四",sex:"男"},{name:"王五",sex:"女"}]// 模板渲染var template1 = $('template1').innerHTML;$('templatelist').innerHTML = template(template1,{list:data});
</script>

2、Mustache的使用方法

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--引入mustache--><script crossorigin="anonymous" integrity="sha512-HYiNpwSxYuji84SQbCU5m9kHEsRqwWypXgJMBtbRSumlx1iBB6QaxgEBZHSHEGM+fKyCX/3Kb5V5jeVXm0OglQ==" src="https://lib.baomitu.com/mustache.js/4.1.0/mustache.min.js"></script></head><body><div id="user_info"></div></body><script type="text/tmplate" id="tmplate"><div><ul><li>姓名：{{user.name}}</li><li>年龄：{{user.age}}</li><li>性别：{{user.sex}}</li></ul></div></script><script type="application/javascript">//实例参数var user = { name: "张三", age: 18, sex: "男"};//模板var template =$("#tmplate").innerHTML;//使用mustache.js进行模板解析填充数据var view = Mustache.render(template, user);//把模板追加到页面中$("$user_info").innerHTML = view;</script>
</html>

h5使用script type=“text/html“构建模板，动态改变模板内容相关推荐

＜script type =“text / template”＞ ... ＜/ script＞的说明
本文翻译自:Explanation of I just stumbled upon something I've never seen before. 我偶然发现了一些我以前从未见过的东西. In t ...
script标签中type为script type=text/x-template是个啥
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...
＜script type=“text/html“＞是怎么回事？
1.问题描述可以在 "script" 片断中定义一个被JS调用的代码,但代码又不在页面上显示. 2.代码示例 <html> <head> <titl ...
[JavaScript] script type=text/javascript /script 和script language=javascript /script区别
language="javascript" 和type="text/javascript"的区别 (1)<script language="ja ...
script type=text/template是干什么的，为什么要把html写在js中？这是什么编程语言风格，都能这样用吗？...
这一段存放了一个模板. 在js里面,经常需要使用js往页面中插入html内容.比如这样: var number = 123; $('#d').append('<div class="t ...
script text html 参数,script type=text/html/script js模版使用
1 2 3 4 1.首先这种写,在页面渲染的时候,浏览器不会读取script标签中的html代码 2.外面不能获取到里面的div节点所以: 在使用时,要在script标签上加个ID可以供我们找到它, ...
Handlebars模板引擎中的each用法（type=“text/x-handlebars-template“）
** handlebar ** 概述与介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less ...
type=“text/javascript“什么意思？
<script type="text/javascript"> 放在之间的是文本类型(text). javascript是告诉浏览器里面的文本是属于javascript ...
type=javascript和type=text/javascript
转载自:http://www.nowamagic.net/librarys/veda/detail/1783 1 <script language = "JavaScript" ...

h5使用script type=“text/html“构建模板，动态改变模板内容

h5使用script type=“text/html“构建模板，动态改变模板内容相关推荐

最新文章

热门文章