hey,
I am trying to populate a UL element by cloning a LI element template.
after doing so - stuff like the styling for when tapping on an item and the fast click binding becomes missing on the populated list items.
html:
<div class="app-page" data-page="menu">
<div class="app-topbar">
<div class="app-button left" data-back data-autotitle></div>
<div class="app-title">Menu</div>
</div>
<div class="app-content">
<div class="app-section">
<ul class="app-list">
<label>Menu</label>
<li class='app-button' data-target='allItems'>Hot Drinks</li>
</ul>
</div>
</div>
</div>
JS:
function menuController(page){
var self = this;
api.getStoreMenu(1,123).done(function(data){
self.render(data, page);
});
$(page).find('li.app-button').on('click', function(){
var i = $(this).data('section-index');
App.load('allItems', {sectionIndex:i});
});
}
menuController.prototype.render = function(menu, page){
var $content = $(page).find('div.app-content');
var $template = $content.find('li.app-button');
var $ul = $(page).find('ul');
menu.forEach(function(cat, i){
var catName = cat.category_name;
var $li = $template.clone(true).text(catName).
attr('data-section-index', i).appendTo($ul);
//attr('data-target-args', '{sectionIndex: "'+i+'"}').appendTo($ul);
});
$template.remove();
}
thanks