Vieille question, mais puisque la question demande "l'utilisation de jQuery", j'ai pensé que je pourrais fournir une option qui vous permet de le faire sans introduire une dépendance de fournisseur.
Bien qu'il existe de nombreux moteurs de modélisation, nombre de leurs fonctionnalités sont tombées en disgrâce récemment, avec l'itération ( <% for ), les conditionnels ( <% if ) et transforme ( <%= myString | uppercase %> ) considérés au mieux comme un micro-langage, et au pire comme des anti-modèles. Les pratiques modernes de modélisation encouragent le simple mappage d'un objet à sa représentation DOM (ou autre), par exemple ce que nous voyons avec les propriétés mappées aux composants dans ReactJS (en particulier les composants sans état).
Modèles à l'intérieur du HTML
Une propriété sur laquelle vous pouvez compter pour garder le HTML de votre modèle à côté du reste de votre HTML, est l'utilisation d'un fichier non exécutant <script> type par exemple <script type="text/template"> . Pour votre cas :
<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>
Au chargement du document, lisez votre modèle et tokenisez-le à l'aide d'une simple fonction String#split
var itemTpl = $('script[data-template="listitem"]').text().split(/\$\{(.+?)\}/g);
Remarquez qu'avec notre jeton, vous l'obtenez en alternance. [text, property, text, property] format. Cela nous permet de le mettre en correspondance de manière agréable en utilisant un fichier Array#map avec une fonction de mise en correspondance :
function render(props) {
return function(tok, i) { return (i % 2) ? props[tok] : tok; };
}
Où props pourrait ressembler à { url: 'http://foo.com', img: '/images/bar.png', title: 'Lorem Ipsum' } .
En mettant tout ça ensemble, en supposant que vous avez analysé et chargé votre itemTpl comme ci-dessus, et vous avez un items réseau dans le champ d'application :
$('.search').keyup(function () {
$('.list-items').append(items.map(function (item) {
return itemTpl.map(render(item)).join('');
}));
});
Cette approche n'est également qu'à peine jQuery - vous devriez être en mesure de prendre la même approche en utilisant vanilla javascript avec document.querySelector y .innerHTML .
jsfiddle
Modèles dans JS
Une question à se poser est la suivante : voulez-vous vraiment/avez-vous besoin de définir les modèles comme des fichiers HTML ? Vous pouvez toujours composer et réutiliser un modèle de la même manière que vous réutiliseriez la plupart des choses que vous voulez répéter : avec une fonction.
Au pays d'es7, l'utilisation de la déstructuration, des chaînes de modèles et des fonctions fléchées permet d'écrire des fonctions de composants très jolies qui peuvent être facilement chargées à l'aide de l'outil de gestion des composants. $.fn.html méthode ci-dessus.
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>
`;
Ensuite, vous pourriez facilement le rendre, même mappé à partir d'un tableau, comme ceci :
$('.list-items').html([
{ url: '/foo', img: 'foo.png', title: 'Foo item' },
{ url: '/bar', img: 'bar.png', title: 'Bar item' },
].map(Item).join(''));
Oh et note finale : n'oubliez pas de désinfecter vos propriétés passées à un modèle, si elles sont lues à partir d'une DB, ou quelqu'un pourrait passer du HTML (et ensuite exécuter des scripts, etc.) à partir de votre page.
