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

Question

我是使用 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>

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

Answer 1

你的函数定义需要一些重构，试试这个：

  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);
                } 
    });
});

希望对你有帮助