Создавать складные элементы динамически с вложенным списком из данных JSON

Question

Я пытаюсь создать список разборных элементов со списком внутри каждого из них. Это данные json, которые я использую.

[ 
    { 
     "productId":1, 
     "name":"Coffee", 
     "baseprice":2.00, 
     "productoption":[ 
     { 
      "productOptionId":1, 
      "topping":"honeymustard", 
      "baseprice":0.30 
     }, 
     { 
      "productOptionId":2, 
      "topping":"barbeque", 
      "baseprice":0.50 
     }, 
     { 
      "productOptionId":3, 
      "topping":"whipcream", 
      "baseprice":0.50 
     } 
     ], 
     "productSubOption":[ 
     { 
      "productSubOptionId":1, 
      "size":"Small", 
      "baseprice":0.50 
     }, 
     { 
      "productSubOptionId":2, 
      "size":"Medium", 
      "baseprice":0.50 
     }, 
     { 
      "productSubOptionId":3, 
      "size":"Large", 
      "baseprice":0.50 
     } 
     ] 
    }, 
    { 
     "productId":2, 
     "name":"Burger", 
     "baseprice":2.00, 
     "productoption":[ 
     { 
      "productOptionId":4, 
      "topping":"mayo", 
      "baseprice":0.50 
     }, 
     { 
      "productOptionId":5, 
      "topping":"onion", 
      "baseprice":0.50 
     } 
     ], 
     "productSubOption":[ 
     { 
      "productSubOptionId":4, 
      "size":"Small", 
      "baseprice":0.50 
     }, 
     { 
      "productSubOptionId":5, 
      "size":"Medium", 
      "baseprice":0.50 
     } 
     ] 
    } 
] 

Я сделал это для создания складного списка. Но мой список не отображается внутри складного. Я новичок в jquery, поэтому не уверен, что не так. Я просмотрел много сообщений, но это сложно понять.

function getMenuForVendor(data,status,jqxhr){ 
    var list = ""; 
    var menu = data; 
     var menulistitem = createList(menu); 

    $(document).on('pageshow','#Menu',function(){ 
     alert('hi from pageshow'); 
     $('#menu-content').append(menulistitem); 
     $('div[data-role=collapsible]').collapsible(); 
     $('div ul').trigger('create'); 
     $.mobile.hidePageLoadingMsg(); 
    }); 
} 

function createList(menudata){ 
    var html = []; 
    $.each(menudata,function(i,val){ 
     html.push('<div data-role="collapsible" data-inset="true" data-id='+val.productId+'><h3>'+val.name+'</h3><ul data-role="listview" data-inset="true"></ul>'); 
     $.each(val.productoption,function(i,val){ 
      html.push('<li class="row">'+val.topping+'</li>'); 
     }); 
     html.push('</div>'); 
    }); 
return html; 
} 

Когда я нажимаю кнопку назад на мой телефон и снова прийти к странице меню количество collapsibles увеличения (повторно получить приложенном). Как его решить? Кроме того, если я нажимаю элемент списка внутри сворачиваемого, то я хочу получить новую страницу с флажками для productSubOptions. Пожалуйста, направляйте.

Answer 1

В createList вместо массива, просто построить строку HTML (убедитесь, что вы не закрыть UL перед добавлением LIS):

function createList(menudata){ 
    var html = ''; 
    $.each(menudata,function(i,val){ 
     html += '<div data-role="collapsible" data-inset="true" data-id='+val.productId+'><h3>'+val.name+'</h3><ul data-role="listview" data-inset="true">'; 
     $.each(val.productoption,function(i,val){ 
      html += '<li class="row">'+val.topping+'</li>'; 
     }); 
     html += '</ul></div>'; 
    }); 
    return html; 
} 

Тогда в pagecreate или pageshow:

var menulistitem = createList(data); 
$('#menu-content').empty().append(menulistitem); 
$('div[data-role=collapsible]').collapsible(); 
$('div ul').listview(); 

Вот DEMO