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模板中的数据;