ページあたり最大 25 項目の JQM ListView があります。
「li」アイテムを削除して新しいアイテムを追加するページを再構築していますが、ボタンからリストをタップすると再構築された UI が応答しないようです。
リスト アイテムを追加するには、すべての「li」アイテムを含む HTML 文字列を生成し、「html li´s」全体をリストに追加します。
リストビューを動的に生成する最良の方法かどうかはわかりませんが、アドバイスをいただけますか?
これは Chrome の CPU プロファイルです 。Chrome では数値が低すぎますが、応答性は完璧です。ここで問題を見つける方法がわかりません :-S はそのようなプロファイルを行う方法を知っていましたが、モバイル デバイス (iPhone または Android ではわかりません)重要)?
ここにいくつかのコードがあります:
function generate_listview(data)
{
var lv_html = '',
group = data.group_by_dia,
last_dia,
init_item = (items_per_page * current_page) -items_per_page,
get_item_func = (data.gym == 'Tots') ? get_new_item_with_gymn : get_new_item;
if (current_page != num_pages) {
final_item = (items_per_page * current_page);
}else{
var resto = Math.round(cache_activities.activitats.length%items_per_page);
final_item = init_item + ((resto > 0) ? resto : items_per_page);
}
var acts = data.activitats.slice(init_item, final_item);
$activitats_list.append('<li data-role="list-divider">Gimnasos: ' + data.gym + " - Dia: " + data.dia + " - Activitat: " + data.activitat + " >> Trobades: " + cache_activities.activitats.length + '</li>');
if (group){
$.each(acts, function(index, value) {
if(value.d != last_dia) {
lv_html += '<li data-role="list-divider">' + value.d + '</li>';
}
lv_html += get_item_func(value,data.gym);
last_dia = value.d;
});
}else{
$.each(acts, function(index, value) {
lv_html += get_item_func(value);
});
}
$activitats_list.append(lv_html);
$activitats_list.listview("refresh");
$.mobile.hidePageLoadingMsg();
$header_p2.text(header_text + ' ' + current_page + '/' + num_pages);
}
function get_new_item(value)
{
var startItem = '<li data-theme="c">',
endItem = '</li>',
color_activitat = '<span class="ui-li-aside ui-li-desc" style="background-color: yellow; width:15px; color: yellow">.</span>';
return startItem +
'<h3 class="ui-li-heading">' + value.a + '</h3>' +
'<p class="ui-li-desc">' +
'<strong>Sala: </strong>' + value.s +
' <strong>Dia: </strong>' + value.d + ' (' +value.i + ' - ' + value.f + ')' +
'</p>' + endItem;
}
function get_new_item_with_gymn(value,gym_name)
{
var startItem = '<li data-theme="c">',
endItem = '</li>',
gym_item = '<strong>Gimnàs: </strong>' + value.g + ' ',
new_line = '</p><p class="ui-li-desc">',
color_activitat = '<span class="ui-li-aside ui-li-desc" style="background-color: yellow; width:15px; color: yellow">.</span>';
return startItem +
'<h3 class="ui-li-heading">' + value.a + '</h3>' +
'<p class="ui-li-desc">' + gym_item +
'<strong>Sala: </strong>' + value.s + new_line +
' <strong>Dia: </strong>' + value.d + ' (' +value.i + ' - ' + value.f + ')' +
'</p>' + endItem;
}
function go_next () {
current_page += 1;
if (current_page > num_pages) {
current_page = num_pages;
}else{
$.mobile.showPageLoadingMsg();
$activitats_list.find('li').remove().end();
generate_listview(cache_activities);
$.mobile.silentScroll(0);
}
if (current_page == num_pages){
$next_btn.button('disable');
$next_btn_down.button('disable');
$prev_btn.button('enable');
$prev_btn_down.button('enable');
}else{
$prev_btn.button('enable');
$prev_btn_down.button('enable');
}
}
function go_previous () {
current_page -= 1;
if (current_page <= 0) {
current_page = 1;
}else{
$.mobile.showPageLoadingMsg();
$activitats_list.find('li').remove().end();
generate_listview(cache_activities);
$.mobile.silentScroll(0);
}
if (current_page == 1) {
$prev_btn.button('disable');
$prev_btn_down.button('disable');
$next_btn.button('enable');
$next_btn_down.button('enable');
}else{
$next_btn.button('enable');
$next_btn_down.button('enable');
}
}