jQuery Mobile 仅加载新数据

Question

出于学习目的，我正在开发这个项目。现在的任务很简单：

1. 使用$.getJSON从DB填充数据。
2. 每隔'n' 秒检查一次新数据，然后append 将其添加到列表中。
3. 通知用户新的数据更改。

这是我到目前为止的示例：（JSBin /不要忘记运行 js） 运行示例时，所有问题都将可见。

这是我拥有的 JS 代码：

$(document).bind('pageinit', function(){

    var $myList = $( "#myList" );
    var newItems = [];

  function loadList(){  
  $.getJSON("http://jsbin.com/vayeni/2.js",function(data){

   $.each(data, function( index, value ) {

     newItems.push( "<li><a>" + value.airline + "</a></li>" );
           if(data>newItems){
            alert('New Entry');
            data=newItems;
      }
   });
        $myList.append( newItems.join( "" ) );
        $myList.listview( "refresh" );
        setTimeout(loadList,1000);
  });
  }
    loadList();
});

感谢您的帮助！

Answer 1

您的数据比较不正确。

你正在考虑这个：

<li><a>JetBlue</a></li>
<li><a>Continental</a></li>
...

到这里：

  {
    "id": "1",
    "airline": "JetBlue",
    "number": "222",
    "people": "3",
    "time": "12:20"
  },
  {
    "id": "2",
    "airline": "Continental",
    "number": "222",
    "people": "5",
    "time": "23:21"
  },

总会有不平等的。

您应该使用另一种方法。例如，如果您的 JSON 数组中的 id 字段是唯一的，您可以将其作为 id 属性附加到无序列表中的每个项目。例如：

newItems.push( "<li id=\"" + value.id + "\"><a>" + value.airline + "</a></li>" );

这样，在每次迭代中，您都可以检查传入的 JSON 项是否已存在于您的列表中，并在没有匹配项时添加它。例如：

if (!$myList.find('#' + value.id).length) {
  newItems.push( "<li id=\" + value.id + \"><a>" + value.airline + "</a></li>" );
}

最后，如果里面有项目，你可以直接追加newItems的内容：

if (newItems.length > 0) {
  $myList.append( newItems.join( "" ) );  
}

这里是编辑后的 ​​sn-p：JSBin