javascript - Arttemplat.js如何动态改变视图
本文介绍了javascript - Arttemplat.js如何动态改变视图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
官网的列子:
var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
这样以后怎么改变数据并更新视图
$(document).on('click',function(){
//....这里该如何写
})
解决方案
谢邀~
首先这只是其中一个例子, 所谓的以后怎么改变数据,这跟这个用法没啥关系~
就拿这个例子来说,就是你先设定一个不为javascript的script标签模板
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul>
</script>
var html = template('test', data);
而这句代码是拿模板和数据进行替换,生成出最终的html片段(说白了就是html标签的字符串)
假设嘛,你的页面就是要把那块模板的内容输出到id为content的dom里面。
$(document).on('click',function(){
var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
setTimeout(function(){
var data = {
title: '标签2',
list: ['文艺2', '博客2', '摄影2', '电影2', '民谣2', '旅行2', '吉他2']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
},5000);
})
你更新来更新去,无非就是data数据变了,template('test',你的新数据)
就得到你最新的目标字符串了,接下来的dom操作,你随意咯~
这篇关于javascript - Arttemplat.js如何动态改变视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文