Добавление элементов в список с помощью JQuery Mobile

Question

Я новичок в работе с Javascript / JQuery, поэтому извиняюсь, если есть другие вопросы и ответы, которые решают мою проблему.Короче говоря, я пытаюсь создать мобильное приложение, которое извлекает некоторые данные из 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 и конечную точку.Моя проблема в том, что когда я загружаю html-файл, который использует js-файл dataController, в списке ничего не отображается!Я не уверен, что я делаю неправильно.Любая помощь или указатели будут высоко оценены.Спасибо

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

Надеюсь, это поможет