博主微信:jiayou321xiaoyu 加微信,备注:前端Tree

artTemplate模板的使用–ajax

js基础 admin 10℃ 0评论

我们在用jq使用ajax的时候一般都是使用字符串拼接,这样是非常麻烦,而且出了问题不容易找到,因此,我们可以使用这个artTemplate模板提高开发效率

那么这个怎么使用呢, 我在这附上一段代码:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
    <title>Document</title>
</head>
<body>
    <!– 4-准备模版  –>
    <script type=”text/template” id=”tmp” >
       <h1>{{ title  }}</h1>
       <ul>
           {{ each nav v i }}
            <li>{{ v }}</li>
           {{ /each }}
       </ul>
    </script>
    <!– 1-引入模板引擎插件 –>
    <script src=”../template-web.js”></script>
    <script>
        //2-准备模版数据
        var data = {
            title : ‘前端开发’,
            nav: [‘大前端’, ‘UI设计’, ‘JAVA’, ‘PHP’, ‘PYTHON’, ‘大数据’]
        }
       1-字符串中,找错很麻烦
        2-实际工作,很可能网页大多数内容,或者整个网页都是动态渲染, 在拼接字符串就很不方便
        实际工作中渲染数据使用的是模版引擎,
        模版引擎用于渲染的数据的
        用模板引擎来渲染上面的数据
        模版引擎的使用步骤
        1-引入插件
        2-准备数据
        3-准备模板
        4-将数据和模版进行绑定,就会生成 对应结构
        template(模版的id, 数据)
        var str = template(‘tmp’,data);
        console.log(str);
        document.body.innerHTML = str;
        模版的语法
        js代码用 {{ }} 进行包裹
        注意点:
        1-传递给模版的数据必须是对象 ,如果不是要将数据包装成对象
        2-在模版中直接使用对象的属性名
    </script>
</body>
</html>

转载请注明:前端Tree » artTemplate模板的使用–ajax

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址