Hi,
i’ve a page that builds a list with a ajax get request. I need to filter the results, so i want to refresh template / page to have my list rebuilt with sorted results.
{ '/games/',
async(routeTo, routeFrom, resolve, reject) {
var router = this;
var app = router.app;
app.preloader.show();
app.request.json(THEME_ajax_url, { controler: 'someController', action: 'someAction', userId: userId }, function (data) {
app.preloader.hide();
resolve({ componentUrl: route_root+'/pages/library.html' }, { context:{ products: data.return}});
});
},
},
},
on:{
pageInit:function(e,page){
var pageContainer=page.$pageEl;
$$('#search-filters select').on('change', function(ev){
var formData = app.form.convertToData('#search-filters');
app.router.navigate(app.router.currentRoute.url, {
reloadCurrent: true,
ignoreCache: true,
});
});
}
}
}
I don’t understand very well how can i manipulate templates by component, i would like to execute template multiple times async.
<template>
<div class="page" data-name="games">
<div class="navbar">
<div class="navbar-inner">
...
</div>
</div>
<div class="toolbar">
...
</div>
<div class="page-content">
<div class="accordion-item" id="search-panel">
<div class="accordion-item-content">
<form class="list" id="search-filters">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Trier par :</div>
<div class="item-input-wrap">
<select name="sort">
<option value="alpha">ordre alphabétique</option>
<option value="date" selected>ordre antéchronologique</option>
</select>
</div>
</div>
</div>
</li>
</ul>
</form>
</div>
</div>
<div class="list media-list" id="library-list" data-list-ids="">
<ul>
{{#each products}}
<li class="swipeout" data-item-id="{{jeu_id}}">
...
</li>
{{/each}}
</ul>
</div>
</div>
</div>
when i try to reload the page, pageInit event says : “e is undefined”
app.router.navigate(app.router.currentRoute.url, {
reloadCurrent: true,
ignoreCache: true,
});