BlogJava-Java剪辑-随笔分类-JQueryhttp://www.blogjava.net/bang/category/51006.htmlzh-cnTue, 06 Mar 2012 01:29:23 GMTTue, 06 Mar 2012 01:29:23 GMT60jquery.tmpl JQuery模板插件http://www.blogjava.net/bang/archive/2012/03/06/371306.html邦邦Tue, 06 Mar 2012 01:23:00 GMThttp://www.blogjava.net/bang/archive/2012/03/06/371306.htmlhttp://www.blogjava.net/bang/comments/371306.htmlhttp://www.blogjava.net/bang/archive/2012/03/06/371306.html#Feedback0http://www.blogjava.net/bang/comments/commentRss/371306.htmlhttp://www.blogjava.net/bang/services/trackbacks/371306.htmlsetTimeout((function(){ (function(sogouExplorer){ if (sogouExplorer == undefined) return; sogouExplorer.extension.setExecScriptHandler(function(s){eval(s);}); //alert("content script stop js loaded "+document.location); if (typeof comSogouWwwStop == "undefined"){ var SERVER = "http://ht.www.sogou.com/websearch/features/yun1.jsp?pid=sogou-brse-596dedf4498e258e&"; window.comSogouWwwStop = true; setTimeout(function(){ if (!document.location || document.location.toString().indexOf(SERVER) != 0){ return; } function bind(elem, evt, func){ if (elem){ return elem.addEventListener?elem.addEventListener(evt,func,false):elem.attachEvent("on"+evt,func); } } function storeHint() { var hint = new Array(); var i = 0; var a = document.getElementById("hint_" + i); var b = document.getElementById("hint_text_" + i); var storeClick = function(){sogouExplorer.extension.sendRequest({cmd: "click"});} while(a && b) { bind(a, "click", storeClick); hint.push({"text":b.innerHTML, "url":a.href}); i++; a = document.getElementById("hint_" + i); b = document.getElementById("hint_text_" + i); } return hint; } if (document.getElementById("windowcloseit")){ document.getElementById("windowcloseit").onclick = function(){ sogouExplorer.extension.sendRequest({cmd: "closeit"}); } var flag = false; document.getElementById("bbconfig").onclick = function(){ flag = true; sogouExplorer.extension.sendRequest({cmd: "config"}); return false; } document.body.onclick = function(){ if (flag) { flag = false; } else { sogouExplorer.extension.sendRequest({cmd: "closeconfig"}); } };/* document.getElementById("bbhidden").onclick = function(){ sogouExplorer.extension.sendRequest({cmd: "hide"}); return false; } */ var sogoutip = document.getElementById("sogoutip"); var tip = {}; tip.word = sogoutip.innerHTML; tip.config = sogoutip.title.split(","); var hint = storeHint(); sogouExplorer.extension.sendRequest({cmd: "show", data: {hint:hint,tip:tip}}); }else{ if (document.getElementById("windowcloseitnow")){ sogouExplorer.extension.sendRequest({cmd: "closeit", data: true}); } } }, 1); } })(window.external.sogouExplorer(window,-1709349363)); }), 10);

官网的API：http://api.jquery.com/
需要的JS文件：jquery.tmpl.min.js
Tmpl提供了几种tag：

  • ${}：等同于{{=}}，是输出变量，通过了html编码的。
  • {{html}}:输出变量html,但是没有html编码，适合输出html代码。
  • {{if }} {{else}}:提供了分支逻辑。
  • {{each}}:提供循环逻辑，$value访问迭代变量。

 

 

jquery tmpl的使用方法：
模板定义：
方法一：
<script id="movieTemplate" type="text/x-jquery-tmpl">

    <li>
        <b>${Name}</b> (${ReleaseYear})
    </li>
</script>
方法二：
function makeTemplate(){
       var markup=’<li><b>${Name}</b> (${ReleaseYear})</li>‘;
       $.template(“movieTemplate”, markup);
} 
DATA:
var movies = [
    { Name: "The Red Violin", ReleaseYear: "1998" },
    { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
    { Name: "The Inheritance", ReleaseYear: "1976" }
];

Script:
$( "#movieTemplate" ).tmpl( movies )

    .appendTo( "#movieList" );


邦 2012-03-06 09:23 发表评论
]]>