客户端模板引擎template-web

对于服务器端使用过art-template和express-art-express来做模板和数据的拼接

对于客户端也有模板引擎可以使用:template-web

使用方法

1、下载template-web.js文件(我放到了前台页面所在目录下的js目录下)

2、在客户端文件中引入模板引擎文件

 <script src="/js/template-web.js"></script>

3、使用模板

        使用script标签包裹模板框架,为script标签添加 id 以便模板引擎可以找到目标模板

        script的内容类型设定为"text/html"

<body>
    <div id="container"></div>
    <!-- 准备template模板 -->
    <script type="text/html" id="tpl">
        <h1>{{username}}{{age}}</h1>
    </script>
    <script type="text/javascript">
        // 3.告诉模板引擎将哪个数据和哪个模板进行拼接
        // 1、模板id  2、数据(对象类型)
        var html = template('tpl', {
            username: 'zhangsan',
            age: 20
        });
        //拼接好的内容添加到页面中
        document.getElementById('container').innerHTML = html;
    </script>
</body>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值