表的内容 IntroductionBackgroundUsing代码 ModelControllerView 实现 列出页详细信息页编辑页层次视图 结论 介绍 微软的ASP。NET MVC框架遵循标准的MVC模式——模型包含要显示的数据，控制器在某些事件发生时执行操作， 初始化模型，并将其传递给视图，视图接受模型并呈现将发送到客户机浏览器的HTML输出。如下所示的架构 如图所示: 客户机(浏览器)向服务器端发送HTTP web请求。在服务器上我们有控制器来处理 请求使用模型获取数据， 并传递给视图。视图生成应该被发送回客户端的HTML。在MVC 3中，有几个视图引擎可以使用- 标准的ASP.NET 查看引擎，剃须刀，火花，NHaml等。所有这些视图引擎使用不同的语法来生成视图;然而，它们的工作原理是一样的 方法——在服务器端获取模型，使用模板进行格式化，然后将HTML发送到客户机浏览器。 本文介绍了视图引擎的另一个概念—在客户机浏览器中呈现视图的客户端视图引擎。 在这个概念中，模型和控制器仍然在服务器端。但是，JSON不是HTML，而是作为服务器端的输出生成的， 它在客户端被接受，并使用JavaScript模板引擎生成HTML。如下所示的架构 如图所示: 向控制器发送HTTP请求并处理模型与标准方法中的方法相同。然而，不是通过 直接使用模型对象 在本例中，对于服务器端视图，模型被发送到客户端，它被格式化为JSON对象，在那里由客户端视图引擎处理。 背景 这个例子展示了ASP中的客户端JavaScript模板引擎。NET MVC项目可以用来代替标准的服务器端模板引擎。 JavaScript模板引擎使用JSON对象作为模型，并在客户端生成HTML。 JavaScript模板引擎原理如下图所示: 使用JavaScript模板引擎，您将需要将模型对象(通常是一些JavaScript对象)传递给视图。 视图将有一个定义的模板 这个模型对象将如何被渲染。一旦它将JavaScript模型与模板绑定，它将生成HTML作为标准的服务器端视图引擎。 如您所见，客户端模板引擎的工作方式与标准的服务器端MVC呈现引擎相同。唯一的区别是视图是在浏览器中处理的。 目前，有几个模板引擎，比如jsRender(继承的 弃用的 jQuery模板),淘汰赛, 纯、noTemplate jsTemplate, Populate和jTemplates，但是这个例子 使用jQuery loadJSON模板引擎。jQuery loadJSON 插件是一个模板引擎，它将一个JSON对象绑定到一个干净的HTML模板并生成 客户端上的视图。将JavaScript模型与模板绑定 您将需要调用类似以下代码行: 隐藏,复制Code
$("#template").loadJSON(model); //If you use loadJSON plugin $("#template").render(model); //if you use jsRender plugin
这个调用将从当前浏览器中的HTML中获取HTML片段，并将其用作绑定的模板 JavaScript对象(模型)。 作为一个例子，假设你有以下JSON对象，应该放在模板: 隐藏,复制Codemodel = { “名称”:“假如娱乐”, “地址”:[“诺贝尔”、“伦敦”、“英国”), :“联系电话” }隐藏,复制Code< div id =“模板”比; & lt; textarea id = "名称" /比; & lt;跨类= "地址"祝辞& lt; / span> & lt;输入name = "接触" /比; & lt; / div> 如果您调用loadJSON与此模型应用到模板，您将得到以下输出: 隐藏,复制Code
<divid="template"> <textareaid="Name">Emkay Entertainments</textarea> <spanclass="Address">Nobel House</span> <spanclass="Address">London</span> <spanclass="Address">UK</span> <inputname="Contact"value="Phone"/> </div>
这是一个简单的JavaScript模板引擎，它具有实现有效的客户端模板引擎所需的所有特性， 然而，你也有其他的。作为示例，使用jsrender模板生成的相同代码如下: 隐藏,复制Codevar模型= { “名称”:“假如娱乐”, “地址”:[{“项”:“诺贝尔家”}, {“项”:“伦敦”}, {“项”:“英国”}, :“联系电话” }隐藏,Copy Code<script id="template" type="text/x-jsrender"> & lt; textarea id = "名称"在{{:名称}}& lt; / textarea> {{为地址}} & lt; span>{{:条目}}& lt; / span> {{/}} & lt;输入名称= "接触" value = "{{:接触}}" /比; & lt; / script> 在JavaScript中，您可以看到非常类似的数据结构。模板中添加了与周围属性名称匹配的占位符 使用{{:和}}。此外，在这里您还可以使用for循环。为了加载 模板的一个模型，您将需要使用类似于fol的东西降低代码: 隐藏,复制Code
$( "#view" ).html( $( "#template" ).render( model ) );
因此，ID为“view”的元素将被填充为HTML 合并模型和模板的结果。 结果将如下例所示: 隐藏,复制Code
<divid="view"> <textareaid="Name">Emkay Entertainments</textarea> <span>Nobel House</span> <span>London</span> <span>UK</span> <inputname="Contact"value="Phone"/> </div>
尽管示例中会使用loadJSON插件，但是在一些小节中会简要介绍使用Pure和jQuery模板的替代实现示例。 我们为什么要使用这种架构?这种架构有一些好处: 性能——在这种架构中，视图处理被转移到浏览器中，其中使用的是浏览器的资源。 服务器应该更快地返回响应，因为服务器端没有视图处理。吞吐量——在这种体系结构中，返回的不是HTML，而是JSON对象 它比HTML小，因为它不包含不必要的 包装纯信息的标签。JSON对象只包含应该显示的数据 而且加载速度更快。缓存——客户端使用的HTML模板不包含任何数据。因此，它们可以被缓存并用于不同的视图页面。 惟一改变的是加载到模板中的JSON数据。跨平台支持——在这种架构中，相同的web服务器可以支持不同的平台，从移动设备到标准浏览器，而不需要 知道谁是客户。服务器向所有客户端返回相同的JSON数据，您可以在客户端放置不同的模板 最佳匹配 用于设备分辨率和支持的特性。例如，在移动设备上，您可以定义 一个较小的模板，其中不会显示丰富的UI元素， 而在标准浏览器中，您将使用完整的富客户端UI。 在下面的部分中，我将向您展示如何创建一个基于JSON的ASP。NET MVC应用程序使用客户端站点模板引擎。 使用的代码 在本文中，给出了一个代码示例来演示如何在ASP中使用客户端视图引擎。净MVC。以下部分显示 如何将jQuery loadJSON插件集成到ASP中。NET MVC应用程序，以取代标准的服务器端视图引擎。 模型 在本例中，有两个类用作模型，它们包含关于公司及其雇员的信息。公司/员工模型的源代码 类在下面的清单中给出: 隐藏,复制Code
public class Company { public int ID { get; set; } public string Name { get; set; } public string Address { get; set; } public string Town { get; set; } public string Description { get; set; } public DateTime Date { get; set; } public string Contact { get; set; } public bool IsFeatured { get; set; } public string[] Country { get; set; } public string Logo { get; set; } public Employee Manager { get; set; } public Employee[] Employees { get; set; } } public class Employee { public string FirstName { get; set; } public string LastName { get; set; } }
Company类有两个对Employee类的引用，一个是对代表该公司经理的单个员工的引用，另一个是该公司的员工数组。 这些模型类将在控制器中序列化，而Company/Employee类实例的JSON表示将序列化 提供给放置在客户端上的视图。 控制器 控制器不是在标准服务器端视图引擎中工作时对用户操作作出反应并返回视图的标准控制器。在JavaScript 在模板引擎中，控制器应该只返回一个JSON对象，该对象将用作客户端上的模型。这个JSON对象将被接受 在JavaScript模板函数中，HTML输出将直接在浏览器页面中生成。这个示例包含三个页面:公司列表， 关于公司的详细信息，以及可以编辑公司详细信息的表单。因此，有两个操作方法应该在控制器中实现。 第一个操作返回一个公司列表，第二个操作通过ID返回一个公司(当详细信息显示时将调用该操作 填充公司数据的表单)。控制器的源代码如下所示: 隐藏,复制Code
public class CompanyController : Controller { public ActionResult List() { return Json(DataRepository.GetCompanies(), JsonRequestBehavior.AllowGet); } public ActionResult Data(int? ID) { return Json(DataRepository.GetCompanies().First( c => c.ID == ID), JsonRequestBehavior.AllowGet); } }
操作方法接受模型类，将其格式化为JSON结果，并将JSON返回给视图引擎。客户端上的视图引擎会 当视图需要模型时调用这些操作。 视图 当使用JavaScript模板引擎时，视图可以是静态页面。您可以使用标准的.aspx页面作为视图，但是普通的HTML页面可以 也可以被利用。给出的示例有四个视图页面: 显示公司列表的列表页面。详细信息页面，其中显示了单个公司的详细信息。一个编辑页面，其中有关单个公司的信息被加载到表单中，在表单中可以更改详细信息并将其发布到服务器端(尽管是发布) 其结果超出了本文的范围)。显示了如何使用客户端模板来呈现复杂的嵌套结构的层次结构页面——这是使用Employee类的唯一示例。 这些是客户端页面的典型使用情况。在下面的部分中，将详细描述这些视图页面以及客户端引擎是如何工作的 可用于渲染它们的说明。 实现 在本节中，我将展示如何使用jQuery实现标准列表、详细信息和编辑页面模板。 列表页面 list页面用于定义一个模板，该模板将用于在浏览器中列出公司。在这个示例中使用了一个静态视图页面，如下所示: 隐藏,复制Code
<html> <head> <title>Listing JSON aray using the HTML template</title> <linkrel="stylesheet"type="text/css"href="/Content/style.css"/> <scriptsrc="/scripts/jQuery-1.4.4.min.js")"type="text/javascript"></script> <scriptsrc="/scripts/jQuery.loadJSON.js")"type="text/javascript"></script> <scriptlanguage="javascript"type="text/javascript"> $(document).ready(function () { $('li').loadJSON('/Company/List'); }); </script> </head> <body> <divid="page-wrap"> <divid="contact-area"> <ul> <li><ahref="details.html"class="ID"> <spanclass="Name"></span> </a><spanclass="Address"></span> </li> </ul> </div> </div> </body> </html>
无序列表中有一个纯HTML代码，它定义了将用于生成输出的项模板。这部分代码如下所示: 隐藏,复制Code
<li> <ahref="details.html"class="ID"> <spanclass="Name"></span> </a> <spanclass="Address"></span> </li>
li标记包含类属性与模型类中的属性匹配的HTML元素。 视图初始化使用JavaScript行从标题: 隐藏,复制Code
$('li').loadJSON('/Company/List');
这一行从/Company/List URL加载一个JSON数组，并将其加载到lI元素中。公司/列表URL激活 Company控制器中的List方法，它返回格式化为JSON数组的公司列表。当loadJSON插件应用时 在这个元素上，对象的属性被放置在模板中。此外，该模板项将为数组中模型的每个实例复制 绑定到模板的。结果，将创建一组li元素，表示所加载的公司列表 /公司/ URL列表。下面是浏览器中生成的视图: jQuery loadJSON插件在加载值之前检查HTML元素的类型。在大多数元素中，值将作为内部文本放置 (例如，SPAN、P或DIV标签)。但是，如果它找到的是一个link元素，而不是内部文本，插件就会添加 作为附加参数的属性放在href属性中的URL中。在上面的例子中，参数ID=17, ID=18, ID=19，等等， 附加到链接的href属性。因此，要添加链接的文本，需要放置一个额外的SPAN标记 在将从不同属性加载的链接中。您可以找到列表功能的实际示例 在这里。 使用jQuery模板/jsRender模板的替代实现 注意，如果需要，您可以使用任何其他模板引擎。例如，如果 一个jQuery 使用模板时，模板应该类似于如下清单所示的代码: 隐藏,复制Code
<ulid="template"> <li> <ahref="/Home/PopulateEdit/${ID}">${Name}</a> ${Address} </li> </ul>
在jQuery模板中，占位符是属性的名称 在${和}中封装——在上面的示例中，是JSON对象的ID、名称和地址属性 将被放在${ID}、${Name}和${Address}占位符中。应该用于加载的JavaScript代码 模板中的JSON数据如下: 隐藏,复制Code
//Prepare template based on the inner HTML in the UL tag with id "template" $.template("my_template", $("#template").html()); //Perform AJAX call and pass returned JSON array to template $.getJSON('/Home/Populate', function (data) { $("#template").html($.tmpl("my_template", data)); });
在jQuery模板中，需要将模板代码放在无序的模板中 使用id "template"列出，并使用$.template()编译它 方法。在生成视图时，可以通过名称my_template引用编译后的模板。然后，执行一个AJAX调用从/填充/列表URL加载JSON 该控制器返回的数据绑定到模板，并设置为无序列表的HTML代码，id为“template”。 模板的结果与loadJSON插件返回的结果相同——只是视图和初始化代码的语法不同。 jQuery模板插件现在已经过时了，不再吗 在积极的开发或维护中。我建议使用jsRender。它有非常类似的sintax，只是做了一些小小的改动。作为一个例子在jsRender而不是$ {ID}您正在使用:{{:ID}}如果你想把原始数据的价值,或{{祝辞ID}}如果你想使用HTML编码只,等效代码加载HTML的模板使用返回的数据通过AJAX下面的例子所示:隐藏,复制code
//Perform AJAX call and pass returned JSON array to template
$.getJSON('/Home/Populate', function (data) {
$("#view").html($("template").render(data));
});<span></span>
，你可以看到它是非常相似的，所以如果你已经使用jQuery模板插件，你想转换你的代码到其他模板，我会推荐jsRender。 详细信息页面 详细信息页面用于显示单个公司的详细信息。它从/Company/Details页面获取一个JSON对象并加载JSON对象 在HTML模板中。本例中使用的详细信息页面如下所示: 隐藏,收缩,复制Code
<html> <head> <title>Displaying details of the single JSON object</title> <linkrel="stylesheet"type="text/css"href="/Content/style.css"/> <scriptsrc="/scripts/jQuery-1.4.4.min.js")"type="text/javascript"></script> <scriptsrc="/scripts/jQuery.loadJSON.js")"type="text/javascript"></script> <scriptlanguage="javascript"type="text/javascript"> $(document).ready(function () { var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+"); $('div#data').loadJSON('/Company/Data/'+id); }); </script> </head> <body> <divid="page-wrap"> <divid="contact-area"> <divid="data"> <h1id="Name"></h1> <imgid="Logo"alt=""src=""/> <labelfor="Address">Address:</label> <spanid="Address"></span> <labelfor="Contact">Contact by:</label> <spanid="Contact"></span> <labelfor="Town">Town:</label> <spanid="Town"></span> <formaction="edit.html"method="get"> <inputtype="hidden"id="ID"name="ID"/> <inputtype="submit"value="Edit"class="submit-button"/> </form> </div> </div> </div> </body> </html>
该页面包含空白HTML模板的定义，其中的元素具有与模型属性相匹配的id属性。 标题中的JavaScript调用从页面URL获取ID参数，并使用该参数调用/Company/Details服务器端页面， 如下代码示例所示: 隐藏,复制Code
var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+"); $('div#data').loadJSON('/Company/Data/'+id);
控制器动作细节(int?当此URL被发送到服务器时，CompanyController中的ID)将被调用 将作为JSON结果返回。这个JSON对象将与“data”ID和元素一起加载到DIV中 在那个DIV中将被填充。您可以在这里看到详细信息页面的实际示例。示例项目中为一个公司生成的视图如下图所示: 使用th的替代实现e纯模板引擎 与前面的示例类似，可以使用任何其他模板引擎，而不是loadJSON。例如，如果使用纯模板引擎，那么模板可以与代码样例中显示的模板相同(纯使用相同的clean模板 HTML代码loadJSON)。JavaScript的初始化调用如下所示: 隐藏,复制Code
var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+"); $.getJSON('/Home/Populate/'+id, function (company) { $("'div#data'").render(company, { '#Name': 'Name', '#Address': 'Address', '#Logo@alt': 'Name', '#Logo@src':'Logo' }); });
在上面的示例中，AJAX调用从/Home/Populate/< idgt;>执行URL，在回调函数中， JSON对象被加载到ID为‘data’的div中，如前面的示例所示。渲染的第二个参数 函数是一个将HTML元素映射到JSON属性的指令。在上面例子中显示的指令中，名称和地址 JSON对象的属性被装载到具有id名称和地址的元素中。在alt属性中 id为'徽标'的元素的名称和在src属性中id为元素的名称 '徽标'被放置在JSON对象的徽标属性中。Pure的优点是您可以定义元素之间的自定义映射规则， 它们的属性和JSON对象的属性。如果不想使用指令，可以使用.autoRender()函数 .render()。函数.autoRender()类似于上面示例中的.loadJSON()函数; 但是，. autorender()函数只根据类名匹配具有属性的元素(这是纯模板引擎中的“默认指令”)。 编辑详细信息 编辑页面类似于详细信息页面。但是，在这里，一个公司记录被加载到HTML表单中。下面的清单显示了编辑页面的示例: 隐藏,收缩,复制Code
<html> <head> <title>Load Form with JSON data</title> <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/> <linkrel="stylesheet"type="text/css"href="/Content/style.css"/> <scriptsrc="/scripts/jQuery-1.4.4.min.js")"type="text/javascript"></script> <scriptsrc="/scripts/jQuery.loadJSON.js")"type="text/javascript"></script> <scriptlanguage="javascript"type="text/javascript"> $(document).ready(function () { var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+"); $('form').loadJSON('/Company/Data/' + id); }); </script> </head> <body> <divid="page-wrap"> <divid="contact-area"> <formname="form_simple"id="form-simple"action="details.html"method="get"> <inputtype="hidden"id="ID"name="ID"/> <labelfor="Name">Name</label> <inputname="Name"id="Name"type="text"/> <labelfor="Address">Address</label> <textareaname="Address"id="Address"rows="5"cols="20"></textarea> <labelfor="Country">Country</label> <selectname="Country"multiple="multiple"> <optionvalue="">-</option> <optionvalue="UK">United Kingdom</option> <optionvalue="SRB">Serbia</option> <optionvalue="USA">United States of America</option> <optionvalue="FRA">France</option> </select> <labelfor="IsFeatured">Is Featured</label> <inputname="IsFeatured"id="IsFeatured"type="checkbox"value="true"/> <labelfor="Town">Town</label> <selectname="Town"id="Town"> <optionvalue=""selected="selected">-</option> <optionvalue="London">London City</option> <optionvalue="Liverpool">Liverpool City</option> <optionvalue="Lothian">Lothian City</option> <optionvalue="Newcastle">Newcastle City</option> <optionvalue="Buckinghamshire">Buckinghamshire City</option> <optionvalue="Essex">Essex City</option> </select> <labelfor="Contact">Contact</label> <inputname="Contact"type="radio"value="Email"/> Email <inputname="Contact"type="radio"value="Phone"/> Phone <inputname="Contact"type="radio"value="Post"/> Post <inputtype="submit"value="Details"class="submit-button"/> </form> </div> </div> </body> </html>
标题应该包含一个JavaScript调用，该调用将JSON对象从URL加载到表单中。这个JavaScript调用如下代码所示: 隐藏,复制Code
var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+"); $('form').loadJSON('/Company/Data/' + id);
这个调用的结果是一个表单，其中填充了从/Company/Data/<ID>加载的JSON对象的属性。URL。 这里有一个使用loadJSON插件填充表单的实例，并描述了填充表单时使用的详细规则 在这里。 下面是一个JSON数据填充表单的例子: jQuery loadJSON插件将检查应该加载JSON属性的每个表单元素的类型，并根据类型进行检查 将属性作为文本放入文本框和文本区域、单选按钮组、单个和多个选择列表以及已选中/未选中的选项中 复选框中的状态。在其他插件中，您需要手动设置用于加载表单元素的映射规则。 在其他插件中，我没有找到填充表单的等价的简单实现，因此这个示例不会在任何替代实现中显示。 层次结构视图 最后一个视图显示了如何使用客户端引擎呈现复杂的/层次结构。前面的例子使用simple 结构(公司数组，单个公司)，但是正如您在模型中看到的，公司和员工之间存在关系。 当Company/ list操作返回公司列表时，以下结构作为JSON结果返回: 隐藏,复制Code
[
{ "ID": 17, "Name": "Emkay Entertainments",
"Address": "Nobel House, Regent Centre",
"Town": "Lothian", "Contact": "Phone", "IsFeatured": true,
"Manager": { "FirstName": "Nick", "LastName": "Donovan" },
"Employees": [ { "FirstName": "John", "LastName": "Doe" },
{ "FirstName": "Alex", "LastName": "Watkins" },
{ "FirstName": "Mick", "LastName": "Henning"}]
},
{ "ID": 18, "Name": "The Empire", "Address": "Milton Keynes Leisure Plaza",
"Town": "Buckinghamshire", "Contact": "Post", "IsFeatured": false,
"Manager": { "FirstName": "Ana", "LastName": "Frank" },
"Employees": [ { "FirstName": "Mark", "LastName": "Anderson" },
{ "FirstName": "John", "LastName": "Haus" },
{ "FirstName": "Sinthia", "LastName": "Clouny"}]
}
]
如您所见，在返回的公司数组中，对于每个公司对象，都有简单的属性(名称、地址等)。 然后返回一个嵌套的对象管理器和一个嵌套的数组雇员。嵌套结构也可以使用客户端引擎显示。 如果使用loadJSON, HTML模板应该包含与返回的JSON响应的结构相匹配的嵌套元素。HTML的一个例子 可以与loadJSON插件一起使用的模板如下所示: 隐藏,复制Code
<ol> <li> <divclass="divEmployees"> <h3>Employees <imgclass="closed"src="/Content/images/details_open.png"alt="open/close"/></h3> <dlclass="Employees"> <dtclass="FirstName"></dt><ddclass="LastName"></dd> </dl> </div> <ahref="details.html"class="ID"> <spanclass="Name"></span></a> <spanclass="Address"></span> <h3>Manager:</h3> <spanclass="Manager"> <spanclass="FirstName"></span> <spanclass="LastName"></span> </span> </li> </ol>
模板中为公司字段(ID、名称、地址)放置了占位符，如列表示例所示。 对于对Manager对象的引用，有一个占位符管理器(在SPAN标记中)，该管理器对象有两个占位符 名字和姓。此外，在DL标记中有一个存放Employee数组的占位符，其中包含Employee数组 通过“Employee”数组关联到公司的对象将被加载。在这个占位符中，嵌套的占位符表示名字 并将嵌套数组中返回的每个员工的姓氏放置。当使用loadJSON在此模板中加载JSON对象时 函数，则生成元素的嵌套结构(移动到右侧)，如下图所示: 在第一个层次上，列出了有序列表中的公司，其中显示了基本的公司详细信息和嵌套的manager对象。对于每个公司，都有一个嵌套列表 为公司工作的员工的数量。在上面的截图中，第一个和第四个公司的员工在扩张，而其他的公司都倒闭了。 你可以这里有一个活生生的例子，但是没有按钮 显示/隐藏员工。显示/隐藏员工嵌套列表的功能是使用自定义JavaScript实现的，而不是一部分 您可以在下面找到关于这个脚本的更多细节。 使用纯模板引擎的替代实现 您可以使用任何其他模板引擎，而不是loadJSON。如果使用Pure，可以使用相同的HTML模板，但需要定义映射规则 在层次模板和从服务器端返回的JSON对象之间。如果使用纯引擎，以下脚本生成视图: 隐藏,复制Code
$.getJSON('/Company/List', function (data) { $("ol").render(data, { li: { 'company<-': { '.ID': 'company.Name', '.ID@href': 'company.ID', '.Address': 'company.Address', '.Manager .FirstName': 'company.Manager.FirstName', '.Manager .LastName': 'company.Manager.LastName', 'dl.Employees': { 'employee<-company.Employees': { '.FirstName': 'employee.FirstName', '.LastName': 'employee.LastName' } } } } }); });
在本例中，JSON对象从'/Company/List' URL中获取，返回的JSON对象被呈现到OL元素中 包含模板的。唯一的区别是明确定义映射规则的指令—我将尝试解释使用的指令 在这个例子中。Render函数找到一个li元素，并遍历由'company<-'指令返回的数组。 循环中的每个对象将被标识为一个“公司”。在具有类ID和地址的元素中，即company.Name 和公司。将数组中的地址字段放在类“ID”的链接的属性href中。 是放置公司的ID。在包含类“FirstName”和“LastName”的元素中 类为“Manager”的元素放置company.Manager。FirstName和company.Manager。LastName(嵌套对象管理器的属性)。 内部列表是使用指令中的最后一条语句生成的。在类为“Employees”的DL元素中应用 阵列公司的一个循环。employee——循环中的每个元素都使用“employee”标识符标识。在元素中DT 而包含类“FirstName”和“LastName”的DD被放置在DL元素中 员工。FirstName和员工。JSON对象的LastName属性。 Pure引擎是一个比loadJSON插件更强大的模板引擎，因为它具有复杂的指令，使您能够精确地定制映射规则 你需要他们。但是，如您所见，您将需要学习用于指令的语法，以便能够定制呈现规则。一个解释 的语法不是本文的一部分(这只是一个特定的例子)，所以如果您对此感兴趣，请找到更多关于语法的细节 在Pure的现场。 应用定制的JavaScript代码 注意，视图引擎只提供一个静态HTML结构——如果需要一些交互，可以添加 此结构的自定义函数。 例如，在此视图中，添加了每次用户单击图像时打开和关闭嵌套雇员列表的功能。 显示/隐藏嵌套列表的代码示例如下所示: 隐藏,复制Code
$("dl.Employees").hide(); $(".closed").click(function (item) { if ($(this).hasClass("closed")) { this.src = "/Content/images/details_close.png"; $(this).removeClass("closed"); $("dl", $(this).parents("li")).fadeIn("slow"); } else { this.src = "/Content/images/details_open.png"; $(this).addClass("closed"); $("dl", $(this).parents("li")).fadeOut("slow"); } });
这段代码最初隐藏了所有嵌套的员工，并将单击处理程序附加到显示/隐藏所选公司员工的图像上 在状态。这完全独立于模板引擎代码，因此相同的函数可以用于不同的视图引擎，只要它们生成 相同的输出。这种方法没有限制;只要知道需要什么结构，就可以对该结构应用任何JavaScript代码 模板引擎生成的。除了自定义代码，您还可以应用一些现有的插件，这些插件将继续处理与客户机的交互。 例如，如果您需要一个可扩展的表，您可以使用DataTables插件，该插件已经处理了您需要的大多数常见功能。在本例中，是模板引擎 可用于生成DataTables插件所需的初始HTML结构，然后可以将此插件应用于生成的结构上，并让插件处理所有进一步的定制交互。 结论 本文解释如何将loadJSON插件用作客户端模板引擎，并展示如何将JSON对象直接加载到HTML中 客户端上的元素。使用客户端模板引擎有几个好处: 性能——从服务器端加载JSON对象时，只有很少的数据从服务器传输到客户端。这条路就不一样了 需要从服务器加载不必要的HTML标记，加载数据所需的时间更短。缓存——该示例使用静态HTML页面作为视图。因此，如果使用活动视图(例如.aspx页面)，则可以将它们缓存在服务器端。 这使得服务器端响应时间更短。真正的设计和代码分离——使用服务器端模板引擎，放在视图中的代码不是完全干净的。HTML代码包含一些 将服务器端数据绑定到视图e所需的元素克莱门特。。本文中的示例表明，视图是完全干净的——没有任何东西 除了视图页面中的HTML代码(甚至不包括自定义属性)。 然而，这并不是web开发的“圣杯”，因为它不能解决您所有的问题，也不能代表完美的解决方案。 如果你有一些复杂的逻辑需要放在视图中，例如，决定是否应该禁用或隐藏某些元素，或者你是否需要动态地 显示/隐藏一些元素，您不能使用简单的客户端视图引擎实现这一点。在这种情况下，最好保留服务器端代码数据，因为 通过代码、部分视图和服务器端控件来控制它会更容易。但是，应用客户端视图引擎(在适当的时候) 会给你带来如上所述的几个好处。 在本例中，使用loadJSON插件是因为它是可以使用的最简单的插件，也是最适合表示的插件 客户端视图引擎概念。但是，您可以使用任何其他模板引擎，其方法也是类似的。我推荐的其他模板引擎有: jsRender——它是 已废弃的jQuery模板，它是标准jQuery API的一部分。一个优秀的模板引擎，为定义规则提供了复杂的语言 用于将模板中的元素与JSON数据源匹配。这个引擎的缺点是您需要学习在指令中使用的模板语言 定义了如何将数据绑定到模板。Knockout——我发现的最先进的模板，支持绑定、更改跟踪/更新JSON模型等。如果你想完全控制你的模板引擎，我会推荐这个。 没有最好的模板引擎，本文中提到的每种引擎都有各自的优缺点。 loadJSON插件的主要优点是其简单性和无需指定即可正确填充表单元素的能力 任何映射规则。但是，同样的事情可以在其他模板引擎中通过或多或少的努力实现。 本文转载于：http://www.diyabc.com/frontweb/news15826.html