用jquery 优化这个模板 this.tpl = '<li class="text-list" data-guid="{{guid}}">\ <a class="text-list-info" target="{{target}}" href="javascript:;">\ <p class="name" title="{{name}}">{{name}}</p>\ <ul class="info-items">{{#tplConfig}}\ <li class="info-item">{{name}}:<span title="{{value}}">{{value}}</span></li>{{/tplConfig}}\ </ul>\ </a>\ <a class="text-list-btn" href="javascript:;"><span>咨询</span></a>\ </li>';
时间: 2023-08-05 14:08:51 浏览: 86
可以使用 jQuery 的模板引擎来优化这个模板,如下所示:
```javascript
var template = '<li class="text-list" data-guid="{{guid}}">' +
'<a class="text-list-info" target="{{target}}" href="javascript:;">' +
'<p class="name" title="{{name}}">{{name}}</p>' +
'<ul class="info-items">{{#tplConfig}}' +
'<li class="info-item">{{name}}:<span title="{{value}}">{{value}}</span></li>{{/tplConfig}}' +
'</ul>' +
'</a>' +
'<a class="text-list-btn" href="javascript:;"><span>咨询</span></a>' +
'</li>';
var data = {
guid: '123456',
target: '_blank',
name: 'John Smith',
tplConfig: [
{
name: 'Age',
value: '30'
},
{
name: 'Job',
value: 'Developer'
}
]
};
var html = $(template).tmpl(data);
```
此外,您还可以将模板保存到 HTML 文件中,然后使用 jQuery 的 AJAX 方法加载模板,例如:
```javascript
$.get('template.html', function (template) {
var data = {
guid: '123456',
target: '_blank',
name: 'John Smith',
tplConfig: [
{
name: 'Age',
value: '30'
},
{
name: 'Job',
value: 'Developer'
}
]
};
var html = $(template).tmpl(data);
$('body').append(html);
});
```
阅读全文