Html JavaScript 引用問題$().tmpl,及使用
阿新 • • 發佈：2018-11-24
最近在js 中使用$().tmpl時，出現報錯：
uncaught typeerror :$ ().tmpl is not a function
解決辦法：
- 檢查是否引用
<script type="text/javascript" src="scripts/jquery.tmpl.js"></script> - 檢查引用的js匯入宣告的位置是否在使用的前面。
$ ().tmpl 使用
官方解釋對該外掛的說明：將匹配的第一個元素作為模板，render指定的資料，簽名如下:
.tmpl([data,][options])
其中引數data的用途很明顯：用於render的資料，可以是任意js型別，包括陣列和物件。options一般情況下都是選項了，官方指出，此處的options是一個使用者自定義的鍵值對的map，繼承自tmplItem資料結構，適用於模板render動作期間。
好吧，先來一個最直觀的例子：
<%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html> <html> <head> <title>jquery template demo</title> <link rel="stylesheet" href="content/site.css" type="text/css" /> <link rel="stylesheet" href="content/jquery.ui.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery.ui.js"></script> <script type="text/javascript" src="scripts/jquery.tmpl.js"></script> <script id="myTemplate" type="text/x-jquery-tmpl"> <tr><td>${ID}</td><td>${Name}</td></tr> </script> <script type="text/javascript"> $(function () { var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}]; $('#myTemplate').tmpl(users).appendTo('#rows'); }); </script> <style type="text/css"> body { padding: 10px; } table { border-collapse: collapse; } </style> </head> <body> <table cellspacing="0" cellpadding="3" border="1"> <tbody id="rows"> </tbody> </table> </body> </html>
例子雖然很小也很簡單，但我覺得這個已經很有用了。
當然，.tmpl()還可以使用來自遠端的資料，比如說服務:
public ActionResult SampleData() { var json = new JsonResult(); json.Data = new[] { new { ID = "remote1", Name = "abcd" }, new { ID = "remote2", Name = "efg" } }; json.JsonRequestBehavior = JsonRequestBehavior.AllowGet; return json; }
這是一個MVC的Action，我把它當做是一個提供資料的服務，然後js程式碼如下:
$('#btnAjax').click(function () {
$.getJSON('@Url.Action("SampleData", "Home")', function (json) {
$('#rows').empty();
$('#myTemplate').tmpl(json).appendTo('#rows');
});
});
效果:
