The jQuery.tmpl()
method is designed for chaining with .appendTo
, .prependTo
, .insertAfter
or .insertBefore
as in the following example.
Example:
$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );
The template
parameter can be any of the following:
- A string containing markup.
- An HTML element (or jQuery object that wraps an element) whose content is to be used as the template.
- A string corresponding to the name of a named template (see jQuery.template() and .template()).
- A compiled-template function (see jQuery.template() and .template()).
If data
is an array, the template is rendered once for each data item in the array. If data
is an object, or if the data
parameter is missing or null, a single template item is rendered.
The return value is a jQuery collection of elements made up of the rendered template items (one for each data item in the array). If the template contains only one top-level element, then there will be one element for each data item in the array.
To insert the rendered template items into the HTML DOM, the returned jQuery collection should not be inserted directly into the DOM, but should be chained with .appendTo
, .prependTo
, .insertAfter
or .insertBefore
, as in following example:
$.tmpl( myTemplate, myData ).appendTo( "#target" );
See also .tmpl().
Example
The following example shows how to use jQuery.tmpl()
to render local data, using a template provided as a string:
<ul id="movieList"></ul>
<script type="text/javascript">
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";
// Compile the markup as a named template
$.template( "movieTemplate", markup );
// Render the template with the movies data and insert
// the rendered HTML under the "movieList" element
$.tmpl( "movieTemplate", movies )
.appendTo( "#movieList" );
</script>
Using Remote Data
Typically the data is not local and is instead obtained using an Ajax request to a remote service or page, as in the following example:
var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";
// Compile the markup as a named template
$.template( "movieTemplate", markup );
$.ajax({
dataType: "jsonp",
url: moviesServiceUrl,
jsonp: "$callback",
success: showMovies
});
// Within the callback, use .tmpl() to render the data.
function showMovies( data ) {
// Render the template with the "movies" data and insert
// the rendered HTML under the 'movieList' element
$.tmpl( "movieTemplate", data )
.appendTo( "#movieList" );
}
The Markup for the Template
You can get the markup for the template from inline markup in the page, or from a string (possibly computed, or obtained remotely). For an example of how to use inline markup, see .tmpl().
Caching the Template
When a template is rendered, the markup is first converted into a compiled-template function. Every time $.tmpl( markup , myData ).appendTo( "#target" )
is called, the template is recompiled. If the same template is to be used more than once for rendering data, you should ensure that the compiled template is cached. To cache the template when using markup that is obtained from a string (rather than from inline markup in the page), use $.template( name, markup )
to create a named template for reuse. See jQuery.template().
Template Tags, Expressions, and Template Variables
Template tags such as the ${}
tag can used within jQuery templates in addition to text and HTML markup to enable a number of scenarios such as composition of templates, iteration over hierarchical data, parameterization of template rendering, etc. Template tags can render content based on the values of data item fields or template variables such as $item
(corresponding to the template item), as well as expressions and function calls. See the documentation topics for each template tag: ${}, {{each}}, {{if}}, {{else}}, {{html}}, {{tmpl}} and {{wrap}}.
The options
Parameter, and Template Items
Each template item (the result of rendering a data item with the template) is associated with a tmplItem
data structure, which can be accessed using jQuery.tmplItem() and .tmplItem(), or the $item
template variable. Any fields or anonomyous methods passed in with the options
parameter of jQuery.tmpl()
will extend the tmplItem
data structure, and so be available to the template as in the following example:
var markup = "<li>Some content: ${$item.myMethod()}.<br/>"
+ " More content: ${$item.myValue}.</li>";
// Compile the markup as a named template
$.template( "movieTemplate", markup );
// Render the template with the movies data
$.tmpl( "movieTemplate", movies,
{
myValue: "somevalue",
myMethod: function() {
return "something";
}
}
).appendTo( "#movieList" );
Example: Render local data using jQuery.tmpl().
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<ul id="movieList"></ul>
<script>
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";
/* Compile the markup as a named template */
$.template( "movieTemplate", markup );
/* Render the template with the movies data and insert
the rendered HTML under the "movieList" element */
$.tmpl( "movieTemplate", movies )
.appendTo( "#movieList" );
</script>
</body>
</html>
Example: Render data from a remote service, using jQuery.tmpl().
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<button id="cartoonsBtn">Cartoons</button>
<button id="dramaBtn">Drama</button>
<ul id="movieList"></ul>
<script>
var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";
/* Compile the markup as a named template */
$.template( "movieTemplate", markup );
function getMovies( genre, skip, top ) {
$.ajax({
dataType: "jsonp",
url: "http://odata.netflix.com/Catalog/Genres('" + genre
+ "')/Titles?$format=json&$skip="
+ skip + "&$top=" + top,
jsonp: "$callback",
success: function( data ) {
/* Get the movies array from the data */
var movies = data.d;
/* Remove current set of movie template items */
$( "#movieList" ).empty();
/* Render the template items for each movie
and insert the template items into the "movieList" */
$.tmpl( "movieTemplate", movies )
.appendTo( "#movieList" );
}
});
}
$( "#cartoonsBtn" ).click( function() {
getMovies( "Cartoons", 0, 6 );
});
$( "#dramaBtn" ).click( function() {
getMovies( "Drama", 0, 6 );
});
</script>
</body>
</html>
相关推荐
jquery.tmpl.js v1.0 内含: jquery.tmpl.js jquery.tmplPlus.js 以及对应的min版本
jquery.tmpl.js jquery.tmpl.js jquery.tmpl.js
适用与jquery 的字符替换模板,示例:$(属性/元素).tmpl
NULL 博文链接:https://nannan408.iteye.com/blog/2126761
解决 [object HTMLInputElement]之类默认值的bug,作者已经7年没有更新此插件了,因此遇到此问题我对源码做了修改,修改时间:2017-11-01。有问题请联系我:31705252@qq.com
jquery-tmpl
解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版,JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl
一个node.js模块,用于将JavaScript模板(例如mustache或jQuery.tmpl)预编译为一个文件。 您可以预编译一些静态小胡子,hogan.js,jQuery.tmpl,underscore.js或任何其他模板,并将它们包含在生成的javascript...
添加的版本:1.4.3 jQuery.tmpl(template [,data] [,options]) template用作模板的HTML标记或文本。 数据的数据呈现。这可以是任何JavaScript类型,包括Array或Object。 options用户定义的键/值对的可...
昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里。官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render...
JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl,现在已经被接受为官方的模版插件了。详细的 API 在 jQuery 的 Templates 里,内置的 demo 也尽情地演示了各种用法。
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。 ... 浏览器端根据 JSON 生成 HTML 有个很...因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中
IT互联网公司手机网站模板基于jquery.min.js、gallery.js、jquery.easing.1.3.js、jquery.elastislide.js、jquery.tmpl.min.js等插件制作,蓝色风格,简洁漂亮。包含多种特效,全套模板,有首页、关于我们、服务、...
requireJs入门实例,可以直接运行,运用到了css.min.js、text.js、jquery.tmpl.min.js
之前用模板渲染都是用angular,无意间发现了jquery tmpl这种轻量级,其文档在这里 官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途...
摘要:脚本资源,jQuery,jQuery相册 Responsive Image Gallery完美版jQuery相册,支持缩略图显示,样式上比较经典,同样是来自国外的精品jQuery应用,除了引入jQuery,还使用了jquery.easing.1.3.js、jquery.tmpl.min...