Html JavaScript 引用问题$().tmpl,及使用

最新推荐文章于 2021-06-15 14:29:40 发布

BeanGo

最新推荐文章于 2021-06-15 14:29:40 发布

阅读量2.2k

点赞数

分类专栏： html5 文章标签：常见错误

本文链接：https://blog.csdn.net/beango/article/details/84336588

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在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');
    });
});

效果:

在这里插入图片描述