zoukankan      html  css  js  c++  java
  • 项目代码摘抄,dot的用法之1

     1 function searchTags() {
     2   var list = $('#tags-list-select option:selected').val();
     3 
     4   console.log(list);
     5 
     6   var keyword = $("#tag-search-input").val();
     7   if($.trim(keyword).length < 1) return false;
     8 
     9   var tpl = doT.template($("#tags-tpl").text());
    10 
    11   var api = "/api/tags/search/" + list + "/" + keyword + "/0";
    12   $.get(api, function(data) {
    13     var html = tpl(data);
    14     $("#tag-result-list").find("ul").append(html);
    15   });
    16 }

    这个搜索方法,做了以下几件事;

    1、获取查询条件的两个关键字;

    2、用获得的关键字拼接url字符串;

    3、初始化dot模板分两步:

      a、获得script的文本内容,jquery用text();js用innerHTML;

      b、用doT.template()处理,上一步获得的内容;

    4、通过ajax的get()方法和第二步拼接的url,获取数据,在回调函数中,将数据填充到模板,之后将模板填充到html中的指定位置;

    html中的javascript模板

    1 <!--添加标签显示模板-->
    2 <script id="tags-tpl" type="text/x-dot-template">
    3   [[~ it.items :item:index]]
    4   [[? item]]
    5   <li><input type='checkbox' name='tags' value='[[= item.id]]' title="[[= item.t]]"/> [[[= item.label]]] [[= item.t]]
    6   </li>[[?]]
    7   [[~]]
    8 </script>

    参与的项目因为有swig模板和dot模板,由于都是用{{}},所以,dot的{{}}改成了[[]];

    it其实相当于参数,出去dot模板中的数据;

    坚持下去就能成功
  • 相关阅读:
    基于Andoird 4.2.2的同步框架源代码学习——同步发起端
    C#MD5为密码加密
    YOUYOU深入学习Ganglia之三(gmetad的软件架构)
    js原生appendChild的bug
    Spring MVC 教程,快速入门,深入分析
    Centos 6.4 Linux 相关问题总结
    jQuery插件之-瀑布流插件
    编辑简单的 shell程序
    Qt国际化相关类
    三层架构与MVC
  • 原文地址:https://www.cnblogs.com/suoking/p/4910963.html
Copyright © 2011-2022 走看看