0

ページあたり最大 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&agrave;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');
    }
}
4

0 に答える 0