使用JQuery定义要追加的超文本标记语言模板
我得到了一个数组，我正在遍历它。每次条件为真时，我都想将下面的HTML代码的副本附加到一个带有一些值的容器元素上。
我可以把这个HTML放在哪里，以便以一种聪明的方式重用？
<a href="#" class="list-group-item">
<div class="image">
<img src="" />
</div>
<p class="list-group-item-text"></p>
</a>JQuery
$('.search').keyup(function() {
$('.list-items').html(null);
$.each(items, function(index) {
// APPENDING CODE HERE
});
});回答 4
Stack Overflow用户
发布于 2016-08-21 22:12:53
老问题，但既然问题问的是“使用jQuery"，我想我应该提供一个选项，让您在不引入任何供应商依赖的情况下做到这一点。
虽然有很多模板引擎，但它们的许多功能最近已经不再受欢迎，迭代(<% for)、条件(<% if)和转换(<%= myString | uppercase %>)充其量被视为微语言，最坏情况下被视为反模式。现代模板实践鼓励简单地将对象映射到它的DOM (或其他)表示，例如，我们看到的映射到ReactJS中组件的属性(特别是无状态组件)。
HTML中的模板
将模板的超文本标记语言放在超文本标记语言其余部分旁边可以依赖的一个属性是使用非执行的<script> type，例如<script type="text/template">。对于您的案例：
<script type="text/template" data-template="listitem">
<a href="${url}" class="list-group-item">
<table>
<tr>
<td><img src="${img}"></td>
<td><p class="list-group-item-text">${title}</p></td>
</tr>
</table>
</a>
</script>加载文档时，读取模板并使用简单的String#split对其进行标记化
var itemTpl = $('script[data-template="listitem"]').text().split(/\$\{(.+?)\}/g);请注意，对于我们的令牌，您将以交替的[text, property, text, property]格式获取它。这让我们可以使用Array#map和一个映射函数很好地映射它：
function render(props) {
return function(tok, i) { return (i % 2) ? props[tok] : tok; };
}让props看起来像{ url: 'http://foo.com', img: '/images/bar.png', title: 'Lorem Ipsum' }。
假设您已经如上所述地解析和加载了itemTpl，并且有一个作用域内的items数组：
$('.search').keyup(function () {
$('.list-items').append(items.map(function (item) {
return itemTpl.map(render(item)).join('');
}));
});这种方法也仅仅是简单的jQuery -你应该能够在document.querySelector和.innerHTML中使用普通的javascript来采用同样的方法。
JS中的模板
一个要问自己的问题是:您真的想/需要将模板定义为HTML文件吗？你可以总是组件化+重用一个模板，就像你想重复使用大多数东西一样:使用一个函数。
在es7-land中，使用解构、模板字符串和箭头函数，您可以编写非常漂亮的组件函数，这些函数可以使用上面的$.fn.html方法轻松加载。
const Item = ({ url, img, title }) => `
<a href="${url}" class="list-group-item">
<div class="image">
<img src="${img}" />
</div>
<p class="list-group-item-text">${title}</p>
</a>
`;然后，您可以轻松地呈现它，甚至可以从数组映射，如下所示：
$('.list-items').html([
{ url: '/foo', img: 'foo.png', title: 'Foo item' },
{ url: '/bar', img: 'bar.png', title: 'Bar item' },
].map(Item).join(''));最后一点注意:如果传递给模板的属性是从数据库读取的，或者有人可能传入HTML (然后运行脚本，等等)，请不要忘记清理这些属性。从你的页面。
Stack Overflow用户
发布于 2013-09-07 21:40:08
在正文中添加某处
<div class="hide">
<a href="#" class="list-group-item">
<table>
<tr>
<td><img src=""></td>
<td><p class="list-group-item-text"></p></td>
</tr>
</table>
</a>
</div>然后创建css
.hide { display: none; }并添加到js中。
$('#output').append( $('.hide').html() );https://stackoverflow.com/questions/18673860
复制相似问题