• doT.js-doT模板方便快捷的组织页面DOM


    重来没有想过,作为一个坐吃等死的前端也会有学习引擎模板的一天

    都是被现实所逼呀.学习优秀代码时,一句一句翻译。忽然看到{{   }}这个包裹的代码。糟心了!看不懂,咋办?学呀!!!!!!

    这是我开始学习的第一个引擎模板!!!鼓掌

    doT.js

    插件描述:doT模板方便快捷的组织页面DOM

    doT.js特点是快,小,无依赖其他插件

    当然了,网上有很多同僚都有介绍这个模板的,基本全部一样。所以我也不会有所改动(照搬)

    1.基本使用套路百度翻译:(真心的,这个百度翻译后的中文我自己都不明白)

    {{    }}for evaluation(百度翻译:为了评价)

    {{=    }}for interpolation(百度翻译:插值法)   //理解为:赋值

    {{~    }}for array iteration(百度翻译:数组代)

    {{?     }}for conditionals(百度翻译:条件句)

    {{!   }}for interpolation with encoding(百度翻译:用编码进行插值)

    {{#    }}for compile-time evaluation/includes and partials(百度翻译:编译时的评估/包含和部分)

    {{##  #}}for compile-time defines(百度翻译:编译时间定义)

    2.举例

    首先是要引用插件的

    <script type="text/javascript" src="jquery-1.11.3.js" ></script>
    <script type="text/javascript" src="doT.js" ></script>

    1).for interpolation 赋值

    格式:

    {{=    }}

    <div id="interpolation"></div>

    <script id="interpolationtmpl1" type="text/x-dot-template">
           <div>Hi {{=it.name}}!</div>
           <div>{{=it.age || ''}}</div>
    </script>

    <script>

         var dataInter1 = {
               "name": "Jake",
               "age": 31
         };
          var interText1 = doT.template($("#interpolationtmpl1").text());
           $("#interpolation").html(interText1(dataInter1));
    </script>

     
  • 相关阅读:
    分布式系统服务治理
    京东一面:子线程如何获取父线程ThreadLocal的值
    巨变来了,金融大数据平台走向何方
    自定义文件夹选择对话框
    DockManager快速隐藏DockPanel
    解决无法创建新的数据库,权限被拒绝的问题
    ArcGIS中的附件功能
    使用CompareStringEx来重新排序
    C#中获取操作系统版本
    list 泛型某一列统计计算求和、平均数、总个数、最大值、最小值
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/8994609.html
Copyright © 2020-2023  润新知