Folositor pentru popularea listelor cu informatii preluate prin ajax, repeater field-urilor, etc.
new templateHtml(template, data, customAttrs);| Type: | string |
| Info: | selector |
| Ex.: | var template = ".template"; or var template = "#template"; |
| Type: | array |
| Info: | Informatiile pregatite pentru listare in html |
| Ex.: |
var data = {
'index' : 1,
'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
'link' : 'http://www.'
};
| Type: | array |
| Info: | attribute suplimentare (https://www.w3schools.com/tags/ref_attributes.asp) |
| Ex.: | var customAttrs = ['src', 'alt', 'href']; |
<ul id="target"></ul><script id="template" type="text/html">
<li>
<span data-render-content="index"></span>.
<b data-render-content="title"></b>
<a href="#" data-render-href="link" data-render-title="title">Read more... </a>
</li>
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../dist/js/javascript-templates.min.js"></script>
<script>
var target = "#target";
var template = "#template";
new templateHtml(
template,
{
'index' : 1,
'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
'link' : 'http://google.com'
}
).appendTo(target);
</script><ul id="target">
<li>
<span data-render-content="index">1</span>.
<b data-render-content="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
<a href="http://google.com" data-render-href="link" data-render-title="title" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Read more... </a>
</li>
</ul>