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 모두 겉으로 페이지/카드 사이를 이동하기 위해 ""태그를 사용하도록 강요하고 나는 동적으로 블로그 게시물을로드 할 그들은 속도를 위해 필요합니다. (그리고 마침내 manifest와 localStorage를 구현할 것입니다.) 내가하고 싶은 일을 위해 JSON으로로드하는 것이 중요합니다. 가능한 한 빠르고 효율적으로 만들고 싶습니다. 나는 새로운 페이지/카드로 점프하는 것 외에도 더 많은 것을 할 수있는 능력을 줄 수있는 "a"가 아니라 div에 클릭을 바인딩하거나 살리기를 원합니다.
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+' ('+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);
}
}
:
$(document).ready(function()
{
// onload
$.ajax({
type: 'GET',
url: '/ajax/feeds',
dataType: 'json',
success: function(data)
{
append_feeds(data);
},
async: true
});
// ...
이 피드 타이틀에 추가하는 기능입니다 :
여기<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>
는 페이지가로드 될 때 발사되는 내용은 다음과 같습니다 여기
은 HTML 부분입니다 지금까지 우리는 기본 HTML을 가지고 있고 append_feeds()는 divs/uls를 제목과 num_unread의 묶음으로 채웠다. 블로그 나는 다음과 같습니다. 또한 다른 div를 링크의 대상으로 설정했습니다 (블로그마다 하나씩). 이들은 "페이지"또는 "카드"입니다.그러나 블로그 제목을 클릭하면 ajax/json을 사용하여 단일 블로그의 모든 게시물을 가져온 다음 적절한 피드 div를 업데이트하고 페이지/카드 (기본적으로 jqtouch 그리고 iui는 href = ""에서 해시의 ID와 일치하는 div를 꺼냅니다).
클릭/탭 이벤트에 바인딩/라이브 시도했지만 jqt/iui seemlingly 전화를 인계받습니다. "a"태그를 건너 뛰고 단지 "li.post"또는 뭔가를 클릭하도록 바인딩 하겠지만 jqtouch는 그것을 클릭으로 인식하지 못합니다. 클릭 이벤트로 실제 링크를 사용할 수 있도록하려는 것 같습니다.