JavaScript中的模板(jsRender)在Django中的使用

最新推荐文章于 2024-02-23 18:31:38 发布

djskl

最新推荐文章于 2024-02-23 18:31:38 发布

阅读量2.4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/djskl/article/details/33313425

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

有时，我们可能会想把存在js数组或字典里的数据放到html里面去，这时比较直接做法就是用js/jquery动态生成html代码，但数据量比较大或数据结构比较复杂时，我想javascript模板可能值得一试。

jsRender就是javascript一个好用的模板。先给一个简单的例子，看其基本用法。

<html>
<head lang="en">
    <script src="jquery-1.10.2.js"></script>
    <script src="jsviews.js"></script>
    <script type="text/javascript">
        $(function(){
            var person = {
                name: "Adriana"
            };
            var myTemplate = $.templates("#theTmpl");
            var html = myTemplate.render(person);
            debugger;
            $("#cnt").html(html);
        });
    </script>
</head>
<body>
<div id="cnt"></div>
<script type="text/x-jsrender" id="theTmpl">
	<label>Name:</label> {{:name}}
</script>
</body>
</html>

是的，就是这么简单，先定义一个html模板(type="x-jsrender")，然后通过$.templates编译生成一个模板对象，最后通过render将js中的数据渲染到页面上。

jsRender比较好用的一点是，如果js中的数据是数组，js模板会迭代生成的，不用for：

<html>
<head lang="en">
    <script src="jquery-1.10.2.js"></script>
    <script src="jsviews.js"></script>
    <script type="text/javascript">
        $(function(){
            var person = [
                {
                    name: "zhangsan"
                },
                {
                    name: "lisi"
                },
                {
                    name: "wanger"
                }
            ];
            var myTemplate = $.templates("#theTmpl");
            var html = myTemplate.render(person);
            debugger;
            $("#cnt").html(html);
        });
    </script>
</head>
<body>
<div id="cnt"></div>
<script type="text/x-jsrender" id="theTmpl">
	<div>Name:{{:name}}</div>
</script>
</body>
</html>

页面：

Name:zhangsan
Name:lisi
Name:wanger

但，jsRender也有它不好用的一面，简单的数组数据是不能直接render的，必须是对象(字典/关联)数组才行，也就是说如果你的数组只包含简单的一个个的数据，那你在用jsRender前需要首先为每个数据起一个名字。

如果你的对象数组是作为另一个对象的属性出现的时候，这时候再想去遍历就用得着for了

<html>
<head lang="en">
    <script src="jquery-1.10.2.js"></script>
    <script src="jsviews.js"></script>
    <script type="text/javascript">
        $(function(){
            var ClassTwo = {
                students:[
                    {
                        name: "zhangsan"
                    },
                    {
                        name: "lisi"
                    },
                    {
                        name: "wanger"
                    }
                ],
               teachers:{
                   math:"Mr.li",
                   chinese:"Mr.Y"
               }
            };
            var myTemplate = $.templates("#theTmpl");
            var html = myTemplate.render(ClassTwo);
            debugger;
            $("#cnt").html(html);
        });
    </script>
</head>
<body>
<div id="cnt"></div>
<script type="text/x-jsrender" id="theTmpl">
    {{for students}}
	    <div>Name:{{:name}}</div>
	{{/for}}
</script>
</body>
</html>

输出同上。

除了for之外，jsRender还有很多其他tags，请参考：Built-in template tags

但，直接在django的模板中使用jsRender是不行的。需要在js模板前后加标签：{% verbatim %}....{% endverbatim %}，处于这个标签内的所有{{}}都会被django忽略。