动态添加项目到列表视图（jQuery Mobile的）

Question

我怎样才能在拔出对象的数据，并动态地将它们添加到列表视图

function(){ 
    var person = { 
     title: "ddd", 
     mes: "sss", 
     op: {}, 
     tel: 2 
    }; 
} 

数据将会从JSON服务器来

---

<div data-role="page" id="page1"> 
    <div data-role="header"> 
     <h1>Заголовок</h1> 
    </div> 

    <ul data-inset="true" id="ideaposits" data-role="listview" data-split-icon="gear"> 
     <script type="text/html" id="list"> 
     <li> 
      <a class="ui-btn ui-icon-carat-r " href="#page2"> 
       <h2 class="title"></h2> 
       <p class="mes"></p> 
      </a> 
      </li> 
     </script> 
    </ul> 
</div> 

，并移动到第二个屏幕第2页........

Answer 1

首先，在“模板”元素隐藏：

   <li style="display:none"> 
        <a class="ui-btn ui-icon-carat-r " href="#page2"> 

         <h2 class="title"></h2> 
         <p class="mes"></p> 

        </a> 
       </li> 

然后，改变你的JavaScript复制的模板项，并填入值，然后显示它：

function(){ 
     var person = { 
      title: "ddd", 
      mes: "sss", 
      op: {}, 
      tel: 2 
     }; 

     var li = $("li"); 
     var newLi = li.clone(); 
     newLi.find(".title").text(person.title); 
     newLi.find(".mes").text(person.mes); 
     newLi.show(); 
     li.after(newLi); 
} 

Answer 2

function getRandomInt(min, max) { 
 
    //credit : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random 
 
    min = Math.ceil(min); 
 
    max = Math.floor(max); 
 
    return Math.floor(Math.random() * (max - min)) + min; 
 
} 
 

 
function dataFromAjaxExample(){ 
 
    var sumall = getRandomInt(2,20); 
 
    $('#head-list').html('List View (total item ' + sumall + ')'); 
 
    // json data from ajax example 
 
    var itemlist = []; 
 
    for(i=1;i<=sumall;i++){ 
 
    itemlist.push({ 
 
     itemid: i, 
 
     title: 'Item ' + i, 
 
     desc: 'is ' + i, 
 
     page: 'page'+i 
 
    }); 
 
    } 
 
    return itemlist; 
 
} 
 

 
//template 
 
function itemList(item){ 
 
    var htmlList = [ 
 
    '<li>', 
 
    '<a class="ui-btn ui-icon-carat-r " href="#' + item.page + ' ">', 
 
    '<h2 class="title">' + item.title + '</h2>', 
 
    '<p class="desc">' + item.desc + '</p>', 
 
    '</a>', 
 
    '</li>' 
 
    ]; 
 
    
 
    return htmlList.join(''); 
 
} 
 

 
//add process 
 
function addItemListView(data){ 
 
    is_list = $('#ideaposits'); 
 
    is_list.html(''); 
 
    data.forEach(function(x){ 
 
    is_list.append(itemList(x)); 
 
    }); 
 
} 
 

 

 
//main process 
 
setInterval(function(){ 
 
    addItemListView(dataFromAjaxExample()); 
 
},4000); 
 

 
//onload 
 
    addItemListView(dataFromAjaxExample());

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
<div data-role="page" id="page1"> 
 
    <div data-role="header"> 
 
     <h1 id='head-list'>List View</h1> 
 
    </div> 
 

 
    <ul data-inset="true" id="ideaposits" data-role="listview" data-split-icon="gear"> 
 

 
      <li> 
 
      <a class="ui-btn ui-icon-carat-r " href="#page2"> 
 
       <h2 class="title"></h2> 
 
       <p class="mes"></p> 
 
      </a> 
 
      </li> 
 
     
 
    </ul> 
 
</div>