jqtouch移动应用ajax加载问题答案

【问题标题】：jqtouch mobile app ajax loading issuejqtouch移动应用ajax加载问题
【发布时间】：2010-08-17 20:46:00
【问题描述】：

我在

处简化了这个问题

SIMPLIFIED: jqtouch mobile app ajax loading issue

但我要离开这篇文章了解详情。谢谢。

我有一个 RSS 阅读器应用程序，用作学习的游乐场。它目前的化身是用于学习 jqtouch/移动应用程序的东西。我在动态加载帖子时遇到问题，因为 jqtouch 接管了“a”并对其进行处理。

一般流程如下：

- Page loads general html (this is very basic, a couple of empty divs 
  between the body tags) and a link to the reader
- when the document is ready, the first thing that fires is
  an ajax call that gets a list of the blogs I'm following that
  have unread posts and appends it to the proper divs
- when I click the link to the reader, all the blog titles are there
- I click a blog title and it is to load all of the unread posts

问题是，jqtouch 和 iui 似乎都强迫你使用“a”标签在页面/卡片之间移动，我想根据需要动态加载博客文章，以提高速度（最终我将实现清单和本地存储）。对于我想做的事情，使用 JSON 加载它很重要。我想让它尽可能快速和高效。我更喜欢将点击绑定/实时点击到 div 而不是“a”，这将使我能够通过点击执行更多操作，而不仅仅是跳转到新页面/卡片。

这是 HTML 部分：

<body>
<div id="home">
<h1>TERSE</h1>
<ul>
    <li><a href="#feeds">teRSSe</a></li>
</ul>
</div>
<div id="feeds">
Loading, please wait ... 
</div>
</body>

这是页面加载时触发的内容：

$(document).ready(function()
{
// onload
$.ajax({
    type:   'GET',
    url:    '/ajax/feeds',
    dataType: 'json',
    success: function(data)
    {   
        append_feeds(data);
    },  
    async: true 
}); 
    // ...

这是在提要标题中添加的功能：

function append_feeds(data)
{
var feeds = '';
    // loop 1, add the links that will be shown in the main feeds block
for ( i=0; i<data.length; i++ )
{
    var this_data = data[i];     
    if ( this_data.unread == 0 )
    {
        continue;
    }

    feeds = feeds+'<li title="'+this_data.title+'" class="feed-list" id="'+this_data.id+'">\n'; 
    feeds = feeds+ '<a id="'+this_data.hid+'" href="#feed-'+this_data.id+'">'+this_data.title+' &nbsp; ('+this_data.unread+' unread)</a>\n';
    feeds = feeds+'</li>\n';
}

$('#feeds').html('<div id="toolbar">\n<h1>RSS</h1>\n<a class="button back" href="#">Back</a>\n</div>\n<ul title="RSS" id="feedul">\n'+feeds+'</ul>\n');

    // loop 2; 2nd time around to create pages/cards for each blog
    // this is where the individual posts will load when the blog
    // title is clicked
for ( i=0; i<data.length; i++ )
{
    var this_data = data[i];     
    if ( this_data.unread == 0 )
    {
        continue;
    }

    var A = '<div id="feed-'+this_data.id+'">\n';
    A = A + ' <h1>'+this_data.title+'</h1>\n';
    A = A + ' <ul id="'+this_data.hid+'" title="'+this_data.title+'">\n';
    A = A + '  <li id="load-'+this_data.id+'" class="load">loading '+this_data.title+' ...</li>\n';
    A = A + ' </ul>\n';
    A = A + '</div>\n';
    $('body').append(A);
}
}

到目前为止，我们已经有了基本的 html，并且 append_feeds() 已经用我正在关注的博客的标题 + num_unread 填充了一堆 div/uls。此外，我还设置了其他 div 作为链接的目标，每个博客一个。这些是“页面”或“卡片”。

但是，当我点击博客的标题时，我想首先使用 ajax/json 抓取单个博客的所有帖子，然后更新正确的提要的 div，并加载页面/卡片（基本上是 jqtouch 和iui 拉出与href="")中hash的ID匹配的div。

我已经尝试绑定/实时到单击/点击事件，但 jqt/iui 似乎接管了呼叫。我会完全跳过“a”标签，只需将点击绑定到“li.post”或其他内容，但 jqtouch 不会将其识别为点击。似乎只想让我使用实际链接作为点击事件。

【问题讨论】：

标签： iphone jqtouch

【解决方案1】：

我刚刚经历了您正在经历的事情。您需要将该 XML 转换为 JSON 对象，编号为 [0]、[1] 等。

这个 JQuery 插件很好用：http://www.fyneworks.com/jquery/xml-to-json/ 将该 JS 添加到您的应用程序中。然后，您的 parse XML 函数会将您想要的 XML 节点（如通道中的项目节点）转换为 JSON 对象，然后为项目编号。

那么看看我如何清空当前的项目列表，构建项目列表并使用“sun”类向列表项目添加自定义 CLICK 函数（我喜欢 jquery）。然后该函数会将其父节点标题和描述添加到需要它的 div 中。 href 会将其推送到新的 jqtouch DIV，该 DIV 将处理所有详细信息。酷啊？如果可行，请投票给我。它对我有用，就像一个魅力。

<ul id="feedlist"></ul>    
<div id="titleDiv"></div>    
<div id="descDiv"></div>

    function parseXml(xml)
    { 
      $('#feedList').html('');
      var rss = $.xml2json(xml); 
      $.each(rss.channel.item, function(i, item)
        { 
        $('#feedList').empty().append('<li class=sun'+i><a href=#contentDiv>'+item.title+'</a></li>'); 
        $('.sun'+i).click(function() {
          $('#titleDiv').empty().append(item.title);                
          $('#descDiv').empty().append(item.description);   
          }); 
       }); 
    };

【讨论】：