jquery-tmpl 取model存储的数据
时间: 2023-08-21 22:05:29 浏览: 55
如果您使用jQuery Templates插件,则可以使用以下方法从存储在模型中的数据中提取数据:
1. 使用$(“#templateId”).tmpl(data);将数据传递给模板。
2. 在模板中使用$(this).data(“keyName”);以检索存储在模型中的数据。其中“keyName”是您要检索的数据键名称。
例如,如果您有以下数据对象:
var data = {
name: "John Doe",
age: 30,
address: {
street: "123 Main St",
city: "Anytown",
state: "CA"
}
};
您可以使用以下模板从中提取数据:
<script id="myTemplate" type="text/x-jquery-tmpl">
<div>
<h2>${name}</h2>
<p>Age: ${age}</p>
<p>Address: ${address.street}, ${address.city}, ${address.state}</p>
</div>
</script>
然后,您可以使用以下代码将数据传递给模板并将结果附加到DOM中:
$("#myTemplate").tmpl(data).appendTo("#myContainer");
相关问题
jquery-tmpl selec option
可以使用 jQuery 的模板引擎 jQuery.tmpl 来渲染 select option。
首先,需要准备好数据:
```javascript
var data = [
{id: 1, name: 'Option 1'},
{id: 2, name: 'Option 2'},
{id: 3, name: 'Option 3'}
];
```
然后,定义模板:
```html
<script id="option-tmpl" type="text/x-jquery-tmpl">
<option value="${id}">${name}</option>
</script>
```
接下来,使用模板引擎将数据渲染到 select 元素中:
```javascript
$('#select').append($('#option-tmpl').tmpl(data));
```
这样就可以动态生成 select option 了。注意,这里的 `#select` 是 select 元素的 ID,需要替换成实际使用的元素选择器。
text/x-jquery-tmpl 嵌套
text/x-jquery-tmpl 是一个 jQuery 模板插件,可以用于生成 HTML 代码。在模板中嵌套另一个模板可以让我们更加灵活地构建复杂的页面。
下面是一个简单的示例,其中包含一个外部模板和一个内部模板:
```
<script id="outerTemplate" type="text/x-jquery-tmpl">
<div>
<h2>${title}</h2>
{{tmpl(items) "#innerTemplate"}}
</div>
</script>
<script id="innerTemplate" type="text/x-jquery-tmpl">
<ul>
{{each(i, item) items}}
<li>${item}</li>
{{/each}}
</ul>
</script>
```
在外部模板中,我们使用 `{{tmpl}}` 指令将内部模板应用于 `items` 数组。在内部模板中,我们使用 `{{each}}` 指令循环遍历 `items` 数组并生成列表项。
要使用这些模板,我们可以在 JavaScript 代码中先编译它们,然后将数据应用于外部模板:
```
var outerTpl = $.template($("#outerTemplate"));
var innerTpl = $.template($("#innerTemplate"));
var data = {
title: "My List",
items: ["Item 1", "Item 2", "Item 3"]
};
var html = outerTpl(data);
$("#myList").html(html);
```
在这个例子中,我们先编译了外部模板和内部模板,然后将数据应用于外部模板并将生成的 HTML 添加到页面中。
注意,在使用嵌套模板时,内部模板的 ID 必须以 `#` 开头,以告诉 jQuery 模板插件使用另一个模板作为子模板。