Question

刷新jquery移动列表视图时遇到问题。

此代码可以正常工作：

$(document).bind( "pagebeforechange", function( e, data ) {

   // Generating a dynamic list
       for(var i=0;i<list.length;i++){
           var link = '<li><a href="#">'+list[i].name+'</a></li>';
           $("#listview").append(link);
       }

   // Listview refresh
   $("#myPage").on('pagebeforeshow', function() {
       try {
           $("#listview").listview('refresh');
       } catch (e) {
           $("#listview").listview();
       }
   });

   $.mobile.changePage($(#myPage), {
        transition:"slide",
        dataUrl:url,
        allowSamePageTransition:true,
        reverse:reverse
    });
    e.preventDefault();

});

但是，我需要动态添加一个图标来列出用户最喜欢的视图项目。我使用一个函数，通过请求将数组返回给本地数据库。

$(document).bind( "pagebeforechange", function( e, data ) {

  getFavs(function(favsArray){       

     // Generating dynamic list with image
       for(var i=0;i<list.length;i++){
           favImg = "";
           if(favsArray.indexOf(list[i].id) !== -1){
               favImg = '<img src="images/star-36-black.png" class="ui-li-icon" />';
           }               
           var link = '<li><a href="#">'+favImg+list[i].name+'</a></li>';
           $("#listview").append(link);
       }

       // Listview refresh
       $("#myPage").on('pagebeforeshow', function() {
          try {
              $("#listview").listview('refresh');
          } catch (e) {
              $("#listview").listview();
          }
       });

  });

   $.mobile.changePage($(#myPage), {
        transition:"slide",
        dataUrl:url,
        allowSamePageTransition:true,
        reverse:reverse
    });
    e.preventDefault();

});

在第二种情况下，Listview()未应用。我不明白为什么第二个选项如此不同以至于它打破了Listview() ...

Answer 1

虽然解决方案有所不同，但我找到了类似的帖子here。在第二个选项中，我只需要删除绑定到pagebeforshow：

   // Listview refresh
      try {
          $("#listview").listview('refresh');
      } catch (e) {
          $("#listview").listview();
      }

但是，我还不明白为什么在第一个选项中需要绑定到pagebeforeshow，而它会破坏第二个选项中的代码......

使用jquery mobile的动态列表视图

1 个答案: