<div class="row" id="list-iterator">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 iterator" target="list-iterator">
<div class="thumbnail">
<img title="l.prd_title" alt="l.prd_title" width="100%" height="290px">
<div class="item-caption">
<h4 class="h-40">{%l.prd_title%}</h4>
<p style="display: none;">l.prd_short_description</p>
</div>
<p class="caption text-right thumbnail">
<a hre="l.prd_slug" ><span class="glyphicon glyphicon-zoom-in"></span> Detalhes</a>
</p>
</div>
<p style="display: none;">l.prd_metakeys</p>
<p>{{from gluon.contrib.simplejson import JSONEncoder
from datetime import datetime
json = JSONEncoder()
}}
{{=json.encode(lista.as_list()) }}
</p>
</div>
</div>
<script type="text/javascript">
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.replace(new RegExp(search, 'g'), replacement);
};
{{
from gluon.serializers import json as sjson
import json
}}
lista = {{#=json.dumps(lista.as_list(), ensure_ascii=False).encode('utf8') }};
document.addEventListener("DOMContentLoaded", function(){
model = document.getElementsByClassName("iterator")[0];//serão várias divs
for (l of lista){
div = model.cloneNode(true);
//será preciso fazer substiuições recursivas.
for (o in l){
start = div.outerHTML.indexOf("{%")+2; // primeiro indice
last = div.outerHTML.indexOf("%}"); //ultimo indice
variable = div.outerHTML.substring(start, last);
div.innerHTML = div.outerHTML.replaceAll(variable, eval(variable));
//remove the delimitters {%%}
div.innerHTML = div.outerHTML.replace('{%','').replace('%}','');
}
//remove the delimitters {%%}
div.innerHTML = div.outerHTML.replaceAll('{%','').replaceAll('%}','');
document.getElementById(model.getAttribute('target')).appendChild(div);
}
//removendo o medel
model.remove();
});
</script>