使用 jQuery 进行客户端模板化

Brij

4.96/5 (58投票s)

2010年11月8日

CPOL

6分钟阅读

187823

1839

本文讨论了 jQuery 的一个非常酷的功能，即客户端模板化。

下载演示示例 - 16.98 KB

引言

jQuery 模板化正在成为新 Web 应用程序的新流行词。在 Web 应用程序中，jQuery 是不可避免的。目前，大多数应用程序都大量使用 jQuery。它提供了非常好的外观和更好的性能。

jQuery 还有很多插件可用，它们提供了非常酷的功能。我们可以借助 jQuery 提供全新的时尚外观。此外，由于我们正在制作非常丰富的应用程序，性能也成为我们应用程序的关键点。jQuery 在这方面也提供了很大的帮助。本文中，我们将主要讨论 jQuery 模板化。

什么是 jQuery

jQuery 是一个基于 JavaScript 的 JavaScript 库。jQuery 为 HTML 文档遍历、DOM 操作、事件处理、动画和 Ajax 交互提供了非常简单的方法，可用于快速 Web 开发。使用普通 JavaScript 可能会非常复杂。

jQuery 越来越受欢迎。它甚至已集成到 VS2008 中，并且在 VS2010 中也可用。jQuery 是开源的。由于其功能，微软开始支持 jQuery 团队并与他们合作，为他们的客户提供更好的基于 Web 的工具。

必备组件

jQuery 库
用于模板化的插件
JSON 库

jQuery 已经随 VS2008/2010 提供。但是，如果您正在使用 VS 2005，则可以从以下链接下载。

下载 jQuery

要下载用于模板化功能的插件，请单击此处。
各位，放轻松！在 jQuery 1.5 之后，您将不再需要这个插件。它将集成到主库本身中。:)

要下载 JSON 库，请单击此处。

由于我们正在使用客户端-服务器架构，大部分工作都由服务器本身完成。服务器将 HTML 响应发送到浏览器，浏览器只显示它。以前，我们在客户端没有做很多事情，通常只进行一些验证，客户端做的事情很少。借助客户端的 Ajax 调用并以 JSON 的非常方便的格式检索数据，将服务器端代码移至客户端变得非常容易。这意味着从服务器传输到客户端的数据不是完整的 HTML 响应，而只是我们需要在不同 HTML 控件中显示的数据。

让我们看一个图示概述

Client Templating

图：客户端模板化如何工作

模板

要使用客户端模板化，您需要以下内容

首先，客户端数据
客户端模板
现在，借助 jQuery，创建 HTML 元素并将其添加到 DOM 中。

现在我正在解释一个示例。本文附带了一个示例。

在我的示例中，我正在显示Persons列表，稍后还会添加一个Person。

显示数据

所以在这里，我首先显示Persons的详细信息。数据以 JSON 格式通过 Ajax 调用在document.ready函数中获取。

让我们一步一步来

我创建了一个客户端模板来显示person数据。模板是

  <script type="text/html" id="personTemplate">
       <div>
            <div style="float:left;"> ID : </div> <div>${UId} </div>
            <div style="float:left;"> Name : </div> <div>${Name} </div>
            <div style="float:left;"> Address : </div> <div>${Address} </div> <br />
       </div>
   </script>

但是，为什么我要把它放在script标签中呢？因为我们不想渲染它。我们将把它用作显示数据的模板。另外请注意，我将type设置为text/html。

在这里，在模板中，${UId}、${Name}和${Address}被替换为提供的数据中的实际值。提供类中的属性名称是相同的。

在服务器端，我创建了一个WebMethod，它将从客户端调用以获取所有人员数据。

我的Person类如下

public class Person
{
    public int UId { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
}

我的WebMethod如下

[WebMethod()]
public static string GetPersons()
{
    List<person> persons = new List<person>()
    {
        new Person { UId = 1, Name = "Brij", Address = "Noida"},
        new Person { UId = 2, Name = "Rahul", Address = "New Delhi" },
        new Person { UId = 3, Name = "John0", Address = "Chris"}
    };

    JavaScriptSerializer ser = new JavaScriptSerializer();
    return ser.Serialize(persons);
}

我在代码中创建了静态数据，可以从她/他想要的任何地方获取，无论是数据库、文件还是其他数据源。

这里我使用了命名空间System.Web.Script.Serialization进行 JavaScript 序列化。

我在document.ready中进行了 Ajax 调用以获取所有persons数据，并在 UI 上显示数据。

//It gets called as soon as DOM gets loaded 

 $(document).ready(function() {
           PopulatePersons();
       });

 //Creating the ajax call, and if succeeded then display the result on UI
 function PopulatePersons() {
     $.ajax({
         type: "POST",
         url: "Default.aspx/GetPersons",
         contentType: "application/json; charset=utf-8",
         data: "{}",
         dataType: "json",
         success: AjaxSucceeded,
         error: AjaxFailed
     }); 

        }
        function AjaxSucceeded(result) {
            Display(result);
        }
        function AjaxFailed(result) {
            alert('no success');
        }

从服务器获取数据后，我们使用 jquery 模板化功能渲染数据

function Display(result) {

            var persons = eval(result.d);
            personCount = persons.length;
                $("#personTemplate").tmpl(persons).appendTo($("#divPerson"));
        }

在这里，我正在做的是解析 webservice 返回的数据。之后，我将其传递给tmpl函数。这行代码...

$("#personTemplate").tmpl(persons).appendTo($("#divPerson"));

...表示使用模板personTemplate渲染persons数据并将其添加到容器div divPerson中。

添加/更新数据

为了在 UI 上添加更多person，我在页面上添加了一个 HTML 按钮来添加一个person。如下

<input id="Button1" type="button" value="AddMorePerson" 
       onclick="AddPerson();"/>

单击添加按钮的 OnClientclick，我使用 Ajax 调用从服务器获取数据。

function AddPerson() {

            var inputs = new Object();
            inputs.count = personCount;

            $.ajax({
                type: "POST",
                url: "Template.aspx/AddPerson",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(inputs),
                dataType: "json",
                success: AjaxSucceeded,
                error: AjaxFailed
            });         
        }

获取数据后，使用客户端模板化显示数据，如下

 function DisplayChildren(result) {

            var persons = eval(result.d);
            personCount = persons.length;
                $("#personTemplate").tmpl(persons).appendTo($("#divPerson"));
        }

它只是将person详细信息附加到现有的div中，如上所示。

注意：应保持类的属性名称与模板中使用的属性名称同步。

嵌套模板

嵌套模板的工作方式与上述相同，但在这里我们将在另一个模板中使用一个模板。这种类型的需求非常常见，当我们一到多或多到多映射时需要显示任何项目的详细信息。

所以在这里，我用一个示例进行了讨论。在这里，我有一个employee类，它有一个address列表。这意味着一个employee可以属于多个address。我的employee和address类如下

public class Address
{
    public string Street { get; set; }
    public String AddressLine1 { get; set; }
    public String AddressLine2 { get; set; }
    public string City { get; set; }
    public string Zip { get; set; }
}

和Employee类

public class Employee
{
    public int EmployeeId { get; set; }
    public String Name { get; set; }
    public int Age { get; set; }
    public List Addresses { get; set; }


}

现在是返回数据的webmethod

[WebMethod()]
 public static string GetEmployees()
 {
    List<employee> persons = new List<employee>()
    {
         new Employee { EmployeeId = 1000, Age=34, Name ="Rahul", 
             Addresses = new List()},
         new Employee { EmployeeId = 1001, Age=29, Name ="Atul", 
             Addresses = new List()},
         new Employee { EmployeeId = 1002, Age=32, Name ="Rohan", 
             Addresses = new List()}
     };
    persons[0].Addresses.Add(new Address() { 
    Street = "Street 5", AddressLine1 = "New Bay Area",
    AddressLine2 = "Near Roma Hospital", City = "Kolkata", Zip = "221001" });

    persons[0].Addresses.Add(new Address() { 
    Street = "Bahadur marg", AddressLine1 = "Kailash Colony", 
    AddressLine2 = "Near Public School", City = "Lucknow", Zip = "226001" });
            
    persons[0].Addresses.Add(new Address() { 
    Street = "Ali Crossing", AddressLine1 = "Republic Colony", 
    AddressLine2 = "Silk Garden", City = "Ahamedabad", Zip = "221021" });

    persons[1].Addresses.Add(new Address() { 
    Street = "Street No 2", AddressLine1 = "Pocket Gama", 
    AddressLine2 = "Near Appollo Hospital", City = "G Noida", Zip = "201301" });
        
    persons[1].Addresses.Add(new Address() { 
    Street = "1634", AddressLine1 = "Sector 15", 
    AddressLine2 = "Near Nirulas", City = "Noida", Zip = "201301" });

    persons[2].Addresses.Add(new Address() { 
    Street = "Street 10", AddressLine1 = "Sector 18", 
    AddressLine2 = "Near Mosaic", City = "Noida", Zip = "201301" });

    persons[2].Addresses.Add(new Address() { 
    Street = "Gol Marg", AddressLine1 = "New Era Colony", 
    AddressLine2 = "Pitambaram", City = "Alllahabad", Zip = "221001" });
        
    JavaScriptSerializer ser = new JavaScriptSerializer();
    return ser.Serialize(persons);
    }
}

现在如上所述，在客户端，此数据使用模板化功能显示。

现在在客户端，我的客户端模板将是

父模板

<script type="text/html" id="empTemplate">
    <div>
            <div style="float:left;font-weight:bold;"> ID : </div> 
            <div>${EmployeeId} </div>
            <div style="float:left;font-weight:bold;"> Name : </div> 
            <div>${Name} </div>
            <div style="float:left;font-weight:bold;"> Age : </div> 
            <div>${Age} </div>
            <div style="font-weight:bold;">Addresses:</div>
            <div style="margin-left:10px;">{{tmpl($data) "#AddressTemplate"}}</div>
    </div>
 </script>

子模板

<script id="AddressTemplate" type="text/html">
      {{each Addresses}}
           <div style="float:left;font-weight:bold;"> Street : </div> 
       <div>${Street} </div>
           <div style="float:left;font-weight:bold;"> AddressLine1 : </div> 
     <div>${AddressLine1} </div>
           <div style="float:left;font-weight:bold;"> AddressLine2 : </div> 
     <div>${AddressLine2} </div>
           <div style="float:left;font-weight:bold;"> City : </div> 
     <div>${City} </div>
           <div style="float:left;font-weight:bold;"> Zip : </div> 
    <div>${Zip} </div><br />
      {{/each}}
 </script>

正如您在子模板中看到的那样，我将模板放在{{each Addresses}}{{/each}}标签中。它只是为每个地址渲染内部模板。它的工作方式类似于foreach。

现在在父模板中，行代码...

{{tmpl($data) "#AddressTemplate"}}

...表示它获取数据，即这里的Addresses列表，并对模板AddressTemplate应用模板化。

请在随附的示例中找到完整代码。

现在让我们运行应用程序

Nested Templates

图：嵌套模板实际应用

微软公告

大约一个月前，微软宣布了三个插件作为 jQuery 的新官方插件

模板化
数据绑定
全球化

新的官方 jQuery 插件提供模板化、数据绑定和全球化

在即将发布的 jQuery 版本 (jQuery 1.5) 中，我们将不需要为模板化功能添加插件。这将是 jQuery 1.5 的一部分。

在这篇文章中，我讨论了Templating，在我的后续文章中，我将讨论Datalinking和Globalization。

结论

正如我已在简介部分讨论过，jQuery 模板化为我们提供了一个非常丰富的功能，可以高效地生成 UI，而无需编写太多代码。因此，只要有可能，就应该使用模板化功能。此功能可能非常有用，当我们需要显示大量数据并且数据可能会更新时。我在我的应用程序中几乎每个页面都使用了它，并且发现它比服务器端代码更高效。

反馈与建议

希望您喜欢这篇文章。请给出您的宝贵反馈，这将对我下次编写更好的内容非常有帮助。

使用 jQuery 进行客户端模板化

目录

显示数据

添加/更新数据

父模板

子模板