通过tempo.js模板引擎将Json串填充到html页面

2018-10-10 23:33:28 织梦安装使用
  • 文章介绍
Shine 菜鸟笔记之Java攻城狮

关于tempo.js官方说明文档:http://www.javascriptoo.com/tempo

一、优点:

1、能够直接在HTML上纯粹的加载数据

2、结构清晰,轻便

二、对比:

template.js引擎是在js中通过引擎渲染数据

 tempo.js在页面上纯粹的渲染数据

三、一个demo告诉你怎么用tempo.js

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4.    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  5.    <title>RunJS</title>

  6.    <script type="text/javascript" src="https://sandbox.runjs.cn/uploads/rs/91/fxinr7bk/tempo.min.js"></script>

  7.    <script type="text/javascript" src="https://sandbox.runjs.cn/uploads/rs/91/fxinr7bk/tempo.js"></script>

  8. </head>

  9. <body>

  10. <div class="content">

  11.    <h3>1、JSON形式数据:{{filed}}通过这个语法填充数据</h3>

  12.    <ol id="marx-brothers1">

  13.        <li data-template>{{nickname}} {{name.last}}</li>

  14.    </ol>

  15.    <!--基本的json数据

  16.    1.Chico Marx

  17.    -->

  18.    <h3>2、如果是数组型数据:var data = [ Leonard Marx, Adolph Marx, Julius Henry Marx, Milton Marx, Herbert Marx ];</h3>

  19.    <h3>{{.}}通过这个语法迭代填充数据</h3>

  20.    <ol id="marx-brothers2">

  21.        <li data-template>{{.}}</li>

  22.    </ol>

  23.    <!--  获取数组型数据的值

  24.    1.Leonard Marx

  25.    2.Adolph Marx

  26.    3.Julius Henry Marx

  27.    4.Milton Marx

  28.    5.Herbert Marx

  29.    -->

  30.    <h3>3、如果不是JSON数据,是数组中数组的形式的数据:var data = [ [Leonard,Marx], [Adolph,Marx], [Julius Henry,Marx], [Milton,Marx], [Herbert,Marx] ];</h3>

  31.    <h3>{{[0]}} {{[1]}}形式通过数组的索引填充数据</h3>

  32.    <ol id="marx-brothers3">

  33.        <li data-template>{{[0]}} {{[1]}}</li>

  34.    </ol>

  35.    <h3>4、如果是一个object数组类型数据:var data = {

  36.        leonard: Leonard Marx,

  37.        adolph: Adolph Marx,

  38.        julius: Julius Henry Marx,

  39.        milton: Milton Marx,

  40.        herbert: Herbert Marx

  41.        };</h3>

  42.    <h3>可以用data-from-map,比如一个key对应一个value来渲染数据</h3>

  43.    <ol id="list10">

  44.        <li data-template data-from-map>{{value}} - {{key | append @marx.com}}</li>

  45.    </ol>

  46.    <!--  一个key对应一个value

  47.    1.Leonard Marx - leonard@marx.com

  48.    2.Adolph Marx - adolph@marx.com

  49.    3.Julius Henry Marx - julius@marx.com

  50.    4.Milton Marx - milton@marx.com

  51.    5.Herbert Marx - herbert@marx.com

  52.    -->

  53.    <h3>5Values are escaped by default


  54.        All values are escaped by default. To disable automatic escaping pass in the escape: false parameter:


  55.        Tempo.prepare(marx-brothers, {escape: false}).render(data);


  56.        If you disable escaping you can control this at individual value level using the escape and encodeURI filters.</h3>

  57.    <ol id="list11">

  58.        <li data-template data-from-map>{{value}} - {{key | append @marx.com}}</li>

  59.    </ol>

  60.    <h3>6、如果是嵌入式的数据: var data = [

  61.        {

  62.        name: {first: Leonard, last: Marx},

  63.        nickname: Chico,

  64.        born: March 21, 1887,

  65.        actor: true,

  66.        solo_endeavours: [{title: Papa Romani}]

  67.        }]</h3>

  68.    <h3>可以用data-template-for="solo_endeavours"形式,solo_endeavours是嵌套外层的名字</h3>

  69.    <ol id="marx-brothers4">

  70.        <li data-template>

  71.            {{nickname}} {{name.last}}

  72.            <ul>

  73.                <li data-template-for="solo_endeavours">{{title}}</li>

  74.            </ul>

  75.        </li>

  76.    </ol>

  77.    <!--

  78.    1.Chico Marx

  79.      Papa Romani

  80. -->

  81.    <h3>7、如果是嵌入式的数据: var data = [

  82.        {

  83.        name: {first: Leonard, last: Marx},

  84.        nickname: Chico,

  85.        born: March 21, 1887,

  86.        actor: true,

  87.        solo_endeavours: [{title: Papa Romani}]

  88.        }]</h3>

  89.    <h3> 通过_parent获取父级属性值</h3>

  90.    <ol id="marx-brothers5">

  91.        <ul data-template><!--嵌套在母模板中使用-->

  92.            <li data-template-for="solo_endeavours">{{_parent.name.first}} acted in {{title}}</li>

  93.        </ul>

  94.    </ol>

  95.    <!--

  96.   Leonard acted in Papa Romani

  97.    -->

  98.    <h3>8、支持更加复杂的渲染模板数据</h3>

  99.    <h3> 通过模板文件渲染数据:Tempo.prepare(marx-brothers, {}, function(template) {

  100.        template.render(data);

  101.        });

  102.    </h3>

  103.    <ol id="marx-brothers6">

  104.        <li data-template>

  105.            <div>{{name.first}} {{name.last}}</div>

  106.            <ul>partials

  107.                <li data-template-for="solo_endeavours"  data-template-file="partials/movie.html"></li>

  108.            </ul>

  109.        </li>

  110.    </ol>

  111.    <h3>9、条件模板</h3>

  112.    <h3>通过data-if-名 判断展示数据或者data-has判断是否有改成员</h3>

  113.    <ul id="marx-brothers7">

  114.        <li data-template data-if-nickname="Groucho">{{nickname}} (aka {{name.first}}) was grumpy!</li>

  115.        <li data-template data-if-actor>{{name.first}}, nicknamed <i>{{nickname}} {{name.last}}</i> was born on

  116.            {{born}}

  117.        </li>


  118.        <!-- Default template -->

  119.        <li data-template>{{name.first}} {{name.last}} was not in any movies!</li>

  120.        <li data-template data-has="friend">{{friend}}></li>

  121.    </ul>

  122.    <!--

  123.    Leonard, nicknamed Chico Marx was born on March 21, 1887

  124. Adolph, nicknamed Harpo Marx was born on November 23, 1888

  125. Groucho (aka Julius Henry) was grumpy!

  126. Milton Marx was not in any movies!

  127. Herbert, nicknamed Zeppo Marx was born on February 25, 1901

  128.    -->

  129. </div>

  130. <script>

  131.    //json数据

  132.    var data = [

  133.        {

  134.            name: {first: Leonard, last: Marx},

  135.            nickname: Chico,

  136.            born: March 21, 1887,

  137.            actor: true,

  138.            solo_endeavours: [{title: Papa Romani}]

  139.        },

  140.        {

  141.            name: {first: Adolph, last: Marx},

  142.            nickname: Harpo,

  143.            born: November 23, 1888,

  144.            actor: true,

  145.            solo_endeavours: [{title: Too Many Kisses, rating: favourite}, {title: Stage Door Canteen}]

  146.        },

  147.        {

  148.            name: {first: Julius Henry, last: Marx},

  149.            nickname: Groucho,

  150.            born: October 2, 1890,

  151.            actor: true,

  152.            solo_endeavours: [{title: Copacabana}, {

  153.                title: Mr. Music,

  154.                rating: favourite

  155.            }, {title: Double Dynamite}]

  156.        },

  157.        {name: {first: Milton, last: Marx}, nickname: Gummo, born: October 23, 1892},

  158.        {

  159.            name: {first: Herbert, last: Marx},

  160.            nickname: Zeppo,

  161.            born: February 25, 1901,

  162.            actor: true,

  163.            solo_endeavours: [{title: A Kiss in the Dark}]

  164.        }

  165.        ];


  166.    /*tempo官网案例数据*/

  167.    /*simple array*/

  168.    var data3 = [ [Leonard,Marx], [Adolph,Marx], [Julius Henry,Marx], [Milton,Marx], [Herbert,Marx] ];

  169.    var data4 = [Leonard Marx, Adolph Marx, Julius Henry Marx, Milton Marx, Herbert Marx];

  170.    var data5 = {

  171.        leonard: Leonard Marx,

  172.        adolph: Adolph Marx,

  173.        julius: Julius Henry Marx,

  174.        milton: Milton Marx,

  175.        herbert: Herbert Marx

  176.    };

  177.    var data6 = [

  178.        {name:{first:Leonard, last:Marx}, nickname:Chico, born:March 21, 1887, actor:true, solo_endeavours:[

  179.            {title:Papa Romani}

  180.        ]},

  181.        {name:{first:Adolph, last:Marx}, nickname:Harpo, born:November 23, 1888, actor:true, solo_endeavours:[

  182.            {title:Too Many Kisses, rating:favourite},

  183.            {title:Stage Door Canteen}

  184.        ]},

  185.        {name:{first:Julius Henry, last:Marx}, nickname:Groucho, born:October 2, 1890, actor:true, solo_endeavours:[

  186.            {title:Copacabana},

  187.            {title:Mr. Music, rating:favourite},

  188.            {title:Double Dynamite}

  189.        ]},

  190.        {name:{first:Milton, last:Marx}, nickname:Gummo, born:October 23, 1892},

  191.        {name:{first:Herbert, last:Marx}, nickname:Zeppo, born:February 25, 1901, actor:true, solo_endeavours:[

  192.            {title:A Kiss in the Dark}

  193.        ]}

  194.    ];


  195.    var data7 = [

  196.        {name: {first: Leonard}, actor: true, solo_endeavours: [{title: Papa Romani}]},

  197.        {

  198.            name: {first: Adolph, last: Marx},

  199.            nickname: Harpo,

  200.            born: November 23, 1888,

  201.            actor: true,

  202.            solo_endeavours: [{title: Too Many Kisses, rating: favourite}, {title: Stage Door Canteen}]

  203.        },

  204.        {

  205.            name: {first: Julius Henry, last: Marx},

  206.            nickname: Groucho,

  207.            born: October 2, 1890,

  208.            actor: true,

  209.            solo_endeavours: [{title: Copacabana}, {

  210.                title: Mr. Music,

  211.                rating: favourite

  212.            }, {title: Double Dynamite}]

  213.        },

  214.        {name: {first: Milton, last: Marx}, nickname: Gummo, born: October 23, 1892},


  215.    ];

  216.    //处理

  217.    window.onload = function () {

  218.        /*tempo官网案例*/

  219.        Tempo.prepare(marx-brothers1).render(data);//json串

  220.        Tempo.prepare(marx-brothers2).render(data4);//数组型数据

  221.        Tempo.prepare(marx-brothers3).render(data3);

  222.        /*In this case you can iterate all the elements using the data-from-map attribute where the key name can be accessed with {{key}} and the value object via {{value}}:*/

  223.        Tempo.prepare(list10).render(data5);

  224.        /*All values are escaped by default. To disable automatic escaping pass in the escape: false parameter:*/

  225.        Tempo.prepare(list11, {escape: false}).render(data5);

  226.        /*多嵌套型数据: Multiple nested templates are supported.*/

  227.        Tempo.prepare(marx-brothers4).render(data);

  228.        /*嵌套在母模板中使用:You can (recursively) refer to parent objects within a nested template using the _parent variable.*/

  229.        Tempo.prepare(marx-brothers5).render(data);

  230.        /*通过模板添加*/

  231.        Tempo.prepare(marx-brothers6, {}, function(template) {

  232.            template.render(data6);

  233.        });

  234.        /*有条件的*/

  235.        Tempo.prepare(marx-brothers7).render(data6);

  236.        /*If JavaScript is disabled in the browser the above example would be rendered as*/

  237.        Tempo.prepare(marx-brothers8).render(data7);

  238.    }

  239. </script>

  240. </body>

  241. </html>

在线demo地址:https://runjs.cn/code/4if3t0l2


    上一篇: 源码分享|简洁大气的个人简历源码 ..

    下一篇: 重构后端模板文件的一种实践 ..

    相关文档推荐

    精品模板推荐

     2020-07-29   18166  0金币下载

     2020-07-27   65338  0金币下载

     2020-07-27   65333  0金币下载

     2020-06-22   57995  0金币下载

     2020-06-13   62585  0金币下载

     2020-06-13   62587  0金币下载

    专业的织梦模板定制下载站,在线购买后即可下载!

    商业源码

    跟版网模板,累计帮助5000+客户企业成功建站,为草根创业提供助力!

    立刻开启你的建站之旅
    
    QQ在线客服

    服务热线

    织梦建站咨询