# jQuery Templates plugin vBeta1.0.0
_Note: The jQuery team has decided not to take this plugin past beta. It is no longer being actively developed or maintained. See vBeta1.0.0 tag for released beta version. Requires jQuery version 1.4.2._
----
jQuery templates contain markup with binding expressions ('Template tags'). Templates are applied to data objects or arrays, and rendered into the HTML DOM
Note that documentation for the _jQuery Templates_ plugin is **no longer maintained on the jQuery documentation site**.
An archive copy of the original documentation (previously at api.jquery.com/category/plugins/templates/) can be found [here] (http://web.archive.org/web/20120920065217/http://api.jquery.com/category/plugins/templates/).
See also [http://www.borismoore.com/2010/10/jquery-templates-is-now-official-jquery.html] (http://www.borismoore.com/2010/10/jquery-templates-is-now-official-jquery.html) for more background.
Live versions of demos from this repository can be found at [http://jquery.github.com/jquery-tmpl/demos/step-by-step.html] (http://jquery.github.com/jquery-tmpl/demos/step-by-step.html).
<p>The beta1 version of jQuery Templates is available on CDN at:
<ul>
<li><a href="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js">http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js</a></li>
<li><a href="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js</a></li>
</ul></p>
---
_The following is a restoration of jQuery's official documentation on tmpl() as it was on 12/28/2012. jQuery is Copyright 2012, John Resig_
[Source](http://web.archive.org/web/20121014080309/http://api.jquery.com/jquery.tmpl/ "Permalink to jQuery.tmpl() � jQuery API")
# jQuery.tmpl( template \[, data\] \[, options\] ) Returns: jQuery
## Description:
**Render the specified HTML content as a template, using the specified data.** version added: 1.4.3
jQuery.tmpl( template \[, data\] \[, options\] )
**template** The HTML markup or text to use as a template.
**data** The data to render. This can be any JavaScript type, including Array or Object.
**options** An optional map of user-defined key-value pairs. Extends the `tmplItem` data structure, available to the template during rendering.
This documentation topic concerns the *jQuery Templates* plugin (jquery-tmpl), which can be downloaded from: http://github.com/jquery/jquery-tmpl.
The `jQuery.tmpl()` method is designed for chaining with `.appendTo`, `.prependTo`, `.insertAfter` or `.insertBefore` as in the following example.
### Example:
```JavaScript
$.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:
```JavaScript
$.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:
```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" );
```
## 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:
```JavaScript
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:
```JavaScript
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" );
```
## Examples:
### Example: Render local data using jQuery.tmpl().
```html
<!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"></sc
没有合适的资源?快使用搜索试试~ 我知道了~
ros3d地图与小车模型显示
共138个文件
js:49个
html:41个
png:19个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 10 下载量 187 浏览量
2022-04-03
10:19:51
上传
评论
收藏 1.62MB ZIP 举报
温馨提示
利用ros3djs实现 turtlebot3 在web 端3d显示但不包含键盘控制也不包含后端只是前端代码。上传的代码我已经验证过了,严格按照步骤一步一步做,先把 自己 turtlebot3 仿真搭起来跑通。技术支持需要另外收费; 注意项目起来后 本地游览器地址是 http://localhost:9001/ ;代码跑通不容易请下载的朋友保护资源不得再次放网上售卖;【我是在ubuntu20.04上跑的】
资源推荐
资源详情
资源评论
收起资源包目录
ros3d地图与小车模型显示 (138个子文件)
bootstrap.min.css 115KB
bootstrap.min.css 115KB
jquery-ui.css 31KB
jquery-ui.css 31KB
font-awesome.min.css 27KB
jquery-ui-1.8.1.custom.css 26KB
font-awesome.min.css 23KB
font-awesome.min.css 23KB
style.css 11KB
syntaxhighlighter.css 10KB
qunit.css 4KB
movies.css 4KB
tabs.css 972B
treeView.css 501B
demos.css 451B
movielist.css 438B
readme.doc 92KB
.gitignore 98B
.gitignore 53B
moviesNoGlobals.html 10KB
index.html 10KB
movies.html 9KB
movies1.html 9KB
movies2.html 9KB
movies3.html 9KB
1_tree-view-using-tmpl-tag-source.html 5KB
0_accordion-switching-template-source.html 5KB
2_tabs-using-wrap-tag-source.html 5KB
basic.html 3KB
treeView.html 3KB
2_tabs-using-wrap-tag.html 3KB
0_accordion-switching-template.html 3KB
parameters.html 3KB
1_tree-view-using-tmpl-tag.html 3KB
5_javascript-source.html 3KB
basic.html 3KB
parameters.html 3KB
composition.html 3KB
1_remote-data-source.html 3KB
composition.html 3KB
2_html-tag-source.html 3KB
tabsTmpl.html 3KB
tabsWrapNested.html 2KB
3_if-else-tag-source.html 2KB
each.html 2KB
6_hierarchical-data-source.html 2KB
4_each-tag-source.html 2KB
tabsWrap.html 2KB
2_html-tag.html 2KB
5_javascript.html 2KB
tabsWrapImperative.html 2KB
0_local-data-source.html 2KB
4_each-tag.html 2KB
1_remote-data.html 2KB
3_if-else-tag.html 2KB
step-by-step.html 2KB
6_hierarchical-data.html 2KB
conditional.html 1KB
0_local-data.html 1KB
index.html 757B
2012100814082487.jpg 835B
ros3d.js 1.29MB
three.js 1.01MB
jquery-3.3.1.js 265KB
jquery-ui.min.js 196KB
roslib.js 158KB
mjpegcanvas.js 98KB
jquery.min.js 94KB
mjpegcanvas.min.js 91KB
jquery-3.3.1.min.js 85KB
jquery.min.js 84KB
easeljs.min.js 79KB
jquery-ui-1.8.1.custom.js 76KB
ros3d.min.js 73KB
ColladaLoader.js 68KB
ColladaLoader2.js 68KB
ros3d.min.js 66KB
roslib.js 65KB
handlebars.min.js 64KB
roslib.min.js 62KB
json3.js 42KB
ros2d.js 40KB
roslib.min.js 40KB
jquery-ui-1.8.1.custom.min.js 37KB
qunit.js 35KB
bootstrap.min.js 35KB
roslib.min.js 27KB
eventemitter2.js 21KB
syntaxhighlighter.min.js 20KB
core.js 20KB
jquery.tmpl.js 19KB
eventemitter2.js 16KB
nav2d.js 15KB
ros2d.min.js 15KB
ros2d.min.js 15KB
Navigator.js 14KB
bootbox.min.js 10KB
STLLoader.js 8KB
eventemitter2.min.js 7KB
eventemitter2.min.js 7KB
共 138 条
- 1
- 2
_无往而不胜_
- 粉丝: 2w+
- 资源: 39
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页