Arttemplat.js如何动态改变视图

Question

官网的列子：

var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

这样以后怎么改变数据并更新视图

$(document).on('click',function(){
   
    //....这里该如何写
})

Answer 1

谢邀~

首先这只是其中一个例子， 所谓的以后怎么改变数据，这跟这个用法没啥关系~

就拿这个例子来说，就是你先设定一个不为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操作，你随意咯~