は、リストビューに項目を動的に追加する（jQueryのモバイル）

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番目の画面のページ2に移動........

Answer 1

まず、 "テンプレート" の要素が隠さMAKE：

   <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>