2015-09-14 25 views
3

我一直在做一個listview,我能夠靜態地使用jQuery格式化它,但是當我嘗試實用地填充數據時,格式不適用。jQuery Listview格式

var resetList = '<ul id="list" data-role="listview" >'; 

     function getItems(){ 
       console.log("Get stations"); 
       navigator.geolocation.getCurrentPosition(locOnSuccess, locOnError); 
       document.getElementById('scroller').innerHTML = resetList; 
       refreshList(); 

      } 

      function processResult(){ 

       if(httpResponse.readyState==4 && httpResponse.status==200){ 
        var result = jQuery.parseJSON(httpResponse.responseText); 
        for(var x = 0; x < result.stations.length; x++){ 
         var var1 = result.stations[x].var1; 
         var var2 = result.stations[x].var2; 
         var var3 = result.stations[x].var3; 
         var var4 = result.stations[x].var4; 
         var var5 = result.stations[x].var5; 
         var var6 = result.stations[x].var6; 

         createListItem(var1, var2, var3, var4, var5, var6); 
         refreshList(); 
        } 
       } 
      } 

    function refreshList(){ 
        $("list").listview().listview('refresh'); 
    } 

    function createListItem(var1, var2, var3, var4, var5, var6){ 
     var listItem = '<li><h2>' + var1 + '</h2><span class="ui-li-aside">' + var2 + '</span> <h4>' + var3 + '</h4><p>' + var4 + '</p></li>'; 
     document.getElementById('list').innerHTML += listItem; 
    } 

新代碼

var resetList = '<ul id="list" data-role="listview" >'; 

      function getItems(){ 
        console.log("Get stations"); 
        navigator.geolocation.getCurrentPosition(locOnSuccess, locOnError); 
        document.getElementById('scroller').innerHTML = resetList; 
        refreshList(); 

       } 

       function processResult(){ 

        if(httpResponse.readyState==4 && httpResponse.status==200){ 
         var result = jQuery.parseJSON(httpResponse.responseText); 
         for(var x = 0; x < result.stations.length; x++){ 
          var var1 = result.stations[x].var1; 
          var var2 = result.stations[x].var2; 
          var var3 = result.stations[x].var3; 
          var var4 = result.stations[x].var4; 
          var var5 = result.stations[x].var5; 
          var var6 = result.stations[x].var6; 

          createListItem(var1, var2, var3, var4, var5, var6); 
          refreshList(); 
         } 
        } 
       } 

     function createListItem(var1, var2, var3, var4, var5, var6){ 
      $('list').append('<li><h2>' + var1 + '</h2><span class="ui-li-aside">' + var2 + '</span> <h4>' + var3 + '</h4><p>' + var4 + '</p></li>').listview().listview('refresh'); 
     } 

回答

0

我能夠通過使用上述

$('list').append('<li><h2>' + var1 + '</h2><span class="ui-li-aside">' + var2 + '</span> <h4>' + var3 + '</h4><p>' + var4 + '</p></li>').listview().listview('refresh');

更新代碼摸不着頭腦。