使用JQuery Mobile将项添加到列表中

时间:2012-02-29 13:05:12

标签: listview jquery-mobile

我是Javascript / JQuery的新手,所以如果还有其他q& a来解决我的问题,那就很麻烦了。简而言之,我正在尝试创建一个移动应用程序,它从Parse中提取一些数据,并在加载此页面时使用它来填充html页面上的列表。

到目前为止,我有下面的javascript文件('dataController'):

if(!window.dataCon){
DataCon = {};
}

$(document).ready(function(){
DataCon.getApps = function(){

  renderApps= function(data){
                for(var i = 0;i<data.results.length;i++)
                {            

                  var rec = data.results[i];

                  var appTitle;

                  if(rec.title) appTitle = rec.title;
                  else appTitle = "Title Unknown";

                  var appCategory;

                  if(rec.category) appCategory = rec.category;
                  else appCategory = "Category Unknown";

                  var appLastBuilt;

                  if(rec.lastBuilt) appLastBuilt = rec.lastBuilt;
                  else appLastBuilt = "unknown";

                  $("#myList").append('<li><a href=""><h3>'+ appTitle +'</h3><p>'+ appCategory +'</p><p>'+ appLastBuilt +'</p></a></li>');

                  $("#myList").listview('refresh'); // This line now updates the listview
              }
}

        $.ajax({
        url:      App.Config.endpoint+"/1/classes/Applications",
        contentType: "application/json",
        type:     "GET",
        headers:{
        'X-Parse-Application-Id': App.Config.applicationId  ,
        'X-Parse-REST-API-Key': App.Config.masterKey
        },
        dataType: "json",
        success:  function(data) {

        renderApps(data);
        },
        error:function (xhr, ajaxOptions, thrownError){
                    alert('error Status:'+xhr.status);
                } 
    });
}// JavaScript Document
});

这是我的.html文件摘录

<ul id="myList" data-role="listview" data-theme="g" inset="true"">      
</ul>

我还有一个配置Parse信息的js文件,即applicationId,masterKey和endpoint。我的问题是当我加载使用'dataController'js文件的html文件时,列表中没有显示任何内容!我不确定我做错了什么。任何帮助或指示将不胜感激。感谢

1 个答案:

答案 0 :(得分:0)

你的函数定义需要一些重构,试试这个:

  function renderApps(data){
                for(var i = 0;i<data.results.length;i++)
                {            

                  var rec = data.results[i];

                  var appTitle;

                  if(rec.title) appTitle = rec.title;
                  else appTitle = "Title Unknown";

                  var appCategory;

                  if(rec.category) appCategory = rec.category;
                  else appCategory = "Category Unknown";

                  var appLastBuilt;

                  if(rec.lastBuilt) appLastBuilt = rec.lastBuilt;
                  else appLastBuilt = "unknown";

                  $("#myList").append('<li><a href=""><h3>'+ appTitle +'</h3><p>'+ appCategory +'</p><p>'+ appLastBuilt +'</p></a></li>');

                  $("#myList").listview('refresh'); // This line now updates the listview
              }
}

$(document).ready(function(){
        $.ajax({
        url:      App.Config.endpoint+"/1/classes/Applications",
        contentType: "application/json",
        type:     "GET",
        headers:{
        'X-Parse-Application-Id': App.Config.applicationId  ,
        'X-Parse-REST-API-Key': App.Config.masterKey
        },
        dataType: "json",
        success:  function(data) {
                renderApps(data);
        },
        error:function (xhr, ajaxOptions, thrownError){
                    alert('error Status:'+xhr.status);
                } 
    });
});

希望这有帮助