客户端加载不了js和html,客户端的洞察力-JsRender 使用 JavaScript 和 HTML | Microsoft Docs...

客户端洞察

07/13/2015

本文内容

将 JsRender 与 JavaScript 和 HTML 配合使用

许多发展平台减少代码和简化维护，使用模板和 HTML5 和 JavaScript 也不例外。JsRender 是一个 JavaScript 库使您可以一次定义一个样板文件结构，并使用它来动态地生成 HTML。JsRender 为具有 codeless 标记语法和高性能，有没有依赖项，对 jQuery 也没有文档对象模型 (DOM)、 支持创建自定义函数并使用纯基于字符串的渲染的 HTML5 开发带来新的模板库。本专栏讨论的方案的 JsRender 是理想，并演示如何使用它的各种功能。可以从下载的所有代码示例 archive.msdn.microsoft.com/mag201204ClientInsight，而且可以从都下载 JsRender bit.ly/ywSoNu。

鲍里斯 · 摩尔和 jQuery UI 团队博客，在 2011 年 4 月决定把 jQuery 模板的团队对有利创建逻辑更少、 基于字符串的渲染图书馆举行。这导致摩尔 (jQuery 模板的幕后推手之一) 创建 JsRender 和 JsViews。这些两个库是有效的 jQuery 模板更换。您可以阅读更多关于历史的模板化与 JsRender 已经对有关的 jQuery 的模板和 JsRender 路线图摩尔后 (bit.ly/AdKeDk) 和 jQuery 团队的邮政 (bit.ly/fhnk8A)。客户端的洞察力将探讨未来几个月的 JsRender 和 JsViews。

为什么模板？

使用模板使用 JavaScript 减少了，简化了代码。如果不使用模板，添加列表项目和其他 HTML 元素的一组数据的一系列可能需要操纵浏览器的 dom。这是其中使用插件如 JsRender 的模板可以是相当有用了繁重的任务。例如，让我们假设您检索一组影片和您要显示它们。您可以编写 JavaScript 和处理 DOM，但下面的代码演示，甚至这一简单任务可以变得难以阅读，即使使用 jQuery 的帮助：

// Without a template

var i = 1;

$(my.vm.movies).each(function () {

var movie = this;

$("#movieContainer1").append(

"

" + i++ + ": " + movie.

name + " ("

+ movie.releaseYear + ")

");

});

代码完全写与 JavaScript 和 jQuery，但它可以难分辨从 JavaScript 数据的 HTML。 使用模板，我们可以更容易地单独的结构和消除大部分的 JavaScript 代码。 下面的模板 (附带的代码下载 01-with-and-without-templates-with-jquery.html) 说明这一概念：

{{:#index+1}}: {{:name}} ({{:releaseYear}})

请注意模板包在脚本标记、 其类型相应地设置但已 id，以便它可以稍后标识。 模板渲染需要三个方面：模板、 数据和容器。 模板定义了如何将呈现数据，并在容器定义呈现它的位置。 下面的代码演示如何呈现电影使用名为 myMovieTemplate 的 movieContainer id 的元素的模板的列表：

$("#movieContainer").html($("#myMovieTemplate").render(my.vm.movies));

此示例使用 jQuery 简化语法。 值得注意的是 JsRender 并不是依赖于 jQuery。 如下所示 (02-jsrender-无-供代码下载中)，还可以写代码以使用 JsRender 呈现使用模板的数据：

my.vm = {

movies: my.getMovies()

};

jsviews.templates({

movieTemplate: document.getElementById("myMovieTemplate").innerHTML

});

document.getElementById("movieContainerNojQuery").innerHTML

= jsviews.render.movieTemplate(my.vm.movies);

呈现模板

你可以呈现模板使用 JavaScript 在几个方面。 首先你要作为一个字符串或在

Render 方法用于呈现 HTML 内容从数据使用的模板。 一组数据可以用在

// #1: Render the my.vm data using the scriptTmpl from a script tag

var htmlString = $("#scriptTmpl").render(my.vm);

// Insert the htmlString into the DOM

$("#div1").html(htmlString);

也可以编译中使用 $.templates(tmplString) 函数的字符串的一个模板，并将其设置为一个变量。 然后可以渲染编译后的模板中，如下所示：

// #2: Compile a template from a string, return a compiled template

var tmpl2 = $.templates(tmplString);

htmlString = tmpl2.render(my.vm);

$("#div2").html(htmlString);

您还可以编译使用 $.templates (模板名称) 语法中，字符串中的一个模板，如下所示：

// #3: Compile a template, name and register it

$.templates("myTmpl3", tmplString);

var htmlString = $.render.myTmpl3(my.vm);

$("#div3").html(htmlString);

在此示例中，$.templates 函数编译使用 tmplString 字符串的模板，并将其注册为命名模板。 然后可以按名称访问该模板，并使用 $.render 呈现。 name() 语法。

$.Templates 功能是类似 jQuery 方法如.css 或.attrib，它提供一个替代的语法用于注册和编译一个调用中的多个模板。 传递两个参数 (名称和 templateString)，而不是，您可以传递组成与映射对象的每个模板予以注册键/值对的只是一个参数：

// #4: Compile multiple templates, register them and render

var tmplString2 = "

*** {{:movies.length}} Total Movies ***

";

$.templates({

tmpl4a: tmplString,

tmpl4b: tmplString2

});

htmlString = $.render.tmpl4a(my.vm);

htmlString += $.render.tmpl4b(my.vm);

$("#div4").html(htmlString);

在对象中的每个属性都将成为一个命名和注册的模板，可以呈现。 属性的值是字符串，将成为该模板。

有许多选项可以创建、 注册和呈现模板。 在脚本标记中定义模板是一个共同的方法，对于大多数情况。 然而，从字符串创建模板提供了很大的灵活性。 前面扩展后的语法提供了更多的灵活性，将与命名模板 (如 helper 函数声明特定于该模板) 关联的其他功能。 所有这些示例可以在代码下载 03 呈现 templates.html 中找到。

JsRender 基础知识

JsRender 模板包含 HTML 标记，再加上 JsRender 的标签，例如 {{为 … …}} 标记或 {{： … …}} 标记。 图 1 显示为最基本的 JsRender 标记语法：{：} 和 {{> }} 标签。 所有 JsRender 模板标签都封装与双大括号。 标记名称 (在此情况下":"或">"字符) 后面可以由一个或多个参数或表达式。 ({：} 标记中的情况下，表达式的结果将然后呈现。)一旦定义了一个模板和要呈现在该模板中的数据，它可以呈现。

图 1 JsRender 基本语法

Description

示例

Output

没有编码的数据项目的名字属性的值

{{： 名字}}

梅德林

没有编码的嵌套属性的简单对象路径

{{: movie.releaseYear}}

1987

简单的比较

{{: movie.releaseYear < 2000}}

True

没有编码的价值

{{： 电影。 }} name

星球大战四：大战之绝地归来

HTML 编码值

{{> 影片。 }} name

星球大战：第六集:< 区域样式 =' 颜色： 紫色 ； 字体样式：斜体 ； ' > 之绝地归来

HTML 编码值

{{html:movie。 }} name

星球大战：第六集:< 区域样式 =' 颜色： 紫色 ； 字体样式：斜体 ； ' > 之绝地归来

下面的代码包含 HTML 元素命名为电影­(这是哪里会呈现模板) 的容器：

{{:name}}

{{>name}}

Year Released: {{:releaseYear}}

Rating: {{:rating}}

前面的代码还包含名为影片的模板­模板，它定义要显示的使用没有使用的语法的 HTML 编码的电影名称的 div {{： 名称}}。 标题中的示例数据可能包含 HTML 元素，因此呈现包含 HTML 元素很重要，不能使用的编码。 但是，如果要呈现的已编码的 HTML，您可以使用语法与 > 字符或使用 HTML (如图所示，在图 1)。

Name 属性值包含 HTML 元素，所以仅用于演示目的，前面的代码显示名称属性的值没有编码 ({{： 名称}}) 然后显示 HTML 编码值 ({{> 名称}})。 您可以在代码下载 04 呈现 values.html 运行完整的示例。

传递给该模板的示例影片数据有 boxArt，这反过来为图像的 smallUrl 属性的属性。 Img 标签的 src 由潜水到对象图的层次结构中使用点语法 boxArt.smallUrl 设置。 路径也使用方括号将经历，而不是写的 boxArt.smallUrl，同样会导致代码实现使用 boxArt [smallUrl]。

它是必须注意的 JsRender 语法也可以用于呈现其他值如类或 id 的 HTML 元素的名称。

JsRender 模板渲染检测数据参数是否为数组或不。 如果它是一个数组，返回值是字符串会导致从每个单个数组项传递的 render 方法的串联。 所以一旦每个数据项目和结果将串联的字符串将呈现模板。

下面的代码演示如何呈现数组中的单个影片对象到 (完整源是可用的示例 04-呈现-values.html) 的 movieTemplate：

my.vm = { movies: getMovies() };

$("#movieContainer").html($("#movieTemplate").render(my.vm.movies[1]));

下一节将演示如何写入该模板循环访问数组。

钻进分层数据

模板通常用于呈现一系列的项目，它往往可以包含嵌套和分层数据 (对象图表)。 图2 JsRender 可以遍历使用 {{}} 的数据系列的显示标记。 该参数为 {{为}} 标记可以是一个数组或一系列的数组，这将迭代。

图 2 迭代基础知识

Description

示例

Output

循环遍历每个项的数组，用"为"

{{为铸造}}

{{: stageName}}

{{/}}

伦敦的爸爸

埃拉爸爸

使用 #data 的数据上下文的访问

{{为电话}}

{{: #data}}

{{/}}

555-555-1212

555-555-1212

影片中的示例数据定义每个影片有一系列的评级称为 RatingStars 的星星。 该属性包含要显示的电影评级明星的 CSS 类。 (从 05-为-data.html 示例代码中) 下面的代码演示如何循环访问每个 RatingStars 数组中的项和呈现 CSS 类的名称使用 {{: #data}} 语法：

{{for ratingStars}}

{{/for}}

#Data 令牌是 JsRender 关键字表示正在迭代的对象。 在此情况下，RatingStars 数组包含一个字符串数组，所以 #data 将代表一个字符串。 此示例输出所示图 3、 评级星星的影片的图像旁边显示的位置。

图 3 渲染对象与无编码

阵列模板

当数组传递给模板时，模板被呈现一次的数组中的每个项。 模板渲染对单个数据的项目，但如果它包括 {{}} 模板标签与数组参数，然后在开始和结束标记 {{的}} 模板的部分和 {{/}} 将进一步迭代。 下面的代码会通过对象 my.vm 包含电影来呈现功能，以显示列表项的每个影片 (完整源可以找到在示例 06 如果 else.html) 的数组：

$("#movieList").html($("#movieTemplateMedium").render(my.vm));

该模板将呈现为

• 的内容 具有 id movieList 元素：

图 4 显示模板电影­TemplateMedium 一开始就呈现

。 为每一部电影在数组中， 将呈现在容器的

• 下。

在模板图 4 接收的 my.vm 对象，作为其上下文，然后循环遍历因为电影数组属性 {{为电影}} 代码。 如果该模板收到的 my.vm，而不是数组 my.vm.movies {{为}} {{/}} 块可以被删除，因为该模板，然后将数组中的每个项目的执行。

图 4 呈现项的列表和使用条件语句

{{for movies}}

{{:name}}

{{if boxArt.smallUrl}}

{{else}}

{{/if}}

Year Released: {{:releaseYear}}

rating: {{:rating}}

{{for ratingStars}}

{{/for}}

${{:salePrice}}

{{if fullPrice !== salePrice}}

PRICED TO SELL!

{{/if}}

{{/for}}

遍历路径

如我们先前所见，可以使用点语法或方括号来遍历路径。 但是，也可以回去的使用 #parent 对象层次结构或标识使用方括号的数组元素。 例如，您可以替换的 img 标签显示以下与模板中的代码：

该模板的上下文是 my.vm.movies 数组中的项。 所以通过两次通过父导航向上，上下文将成为 my.vm 对象。 然后可以抓取索引 2 的电影，并使用它的 boxArt.smallUrl 属性的图像。 这将会显示同一部电影 (第三电影) 的数组中的每一部电影 (如图所示，在图 5)。 不完全理想在这种情况，但它是显示如何遍历向上和向下在层次结构中这两个对象的点。

图 5 遍历每一部电影为显示相同的影片图像路径

条件语句

JsRender 语法也支持条件语句使用标记 {{如果}} 和 {{别的}} (示图 6)。 {{如果}} 标记可能跟着零，一个或多个 {{别的}} 标签，然后关闭 {{和}} 标记。 {{If}} 之间的代码块的内容标记和 {{和}} (或达如果存在的第一个 {{别的}} 标记) 将在输出中呈现，仅当在 {{if}} 表达式的值是"truthy"。

图 6 条件语句、 表达式和运算符

Description

示例

Output

创建一个 if 块比较评估

{{如果 fullPrice! = = salePrice}}

< div 类 ="文本 highlightText">

定价出售!