将项目动态添加到列表视图（jQuery 移动）答案

【问题标题】：Dynamically adding items to listview (jQuery mobile)将项目动态添加到列表视图（jQuery 移动）
【发布时间】：2016-11-18 08:23:15
【问题描述】：

我怎样才能从对象的数据中提取并动态地将它们添加到列表视图中

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>

然后转到第二个屏幕页面 ........

【问题讨论】：

标签： javascript jquery listview jquery-mobile

【解决方案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);
}

【讨论】：

第一个元素为空如何删除空白项？因为它从添加第二个元素开始

【解决方案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>

【讨论】：