Jquery mobile 将扶手杆与Yahoo管道一起使用
我正在尝试使用handlebar.js和jQuery的ajax方法将JSON提要从yahoo pipes源拉到我的jQuery移动项目中。 这种方法在没有把手的情况下工作,但有一些限制。它不会以jquerymobile listview格式显示,而是像普通的项目符号列表一样弹出。以下是消息来源:Jquery mobile 将扶手杆与Yahoo管道一起使用,jquery-mobile,handlebars.js,yahoo-pipes,Jquery Mobile,Handlebars.js,Yahoo Pipes,我正在尝试使用handlebar.js和jQuery的ajax方法将JSON提要从yahoo pipes源拉到我的jQuery移动项目中。 这种方法在没有把手的情况下工作,但有一些限制。它不会以jquerymobile listview格式显示,而是像普通的项目符号列表一样弹出。以下是消息来源: var pipeURL = "http://pipes.yahoo.com/pipes/pipe.run?_id=mu3NkfY_3BGtncSIJhOy0Q&_render=json"; $
var pipeURL = "http://pipes.yahoo.com/pipes/pipe.run?_id=mu3NkfY_3BGtncSIJhOy0Q&_render=json";
$.ajax({
url : pipeURL,
dataType : "json",
success : function(data) {
console.log(data);
var html = '<ul data-role="listview" id="all-posts-two" data-filter="" data-count-theme="c">';
$.each(data.value.items, function(i, item) {
html += "<li>" + item.title + "</li>";
});
html += "</ul>";
//Add the feed to the page
$("#PostsList").empty().html(html);
}
});
下面是模板的html源代码
<ul data-role="listview" id="all-posts" data-filter=""></ul>
<script id="posts-template" type="text/x-handlebars-template">
{{#each value.items}}
<li data-postid="{{ID}}">
<a data-transition="slide" href="#">
<p>{{{title}}}</p>
</a>
</li>
{{/each}}
</script>
{{{#每个值.items}
{{/每个}}
任何人,请帮帮我,从我看到的情况来看,您使用的是较旧版本的jQuery Mobile(低于1.4) 这样做:
var pipeURL = "http://pipes.yahoo.com/pipes/pipe.run?_id=mu3NkfY_3BGtncSIJhOy0Q&_render=json";
$.ajax({
url : pipeURL,
dataType : "json",
success : function(data) {
console.log(data);
var html = '<ul data-role="listview" id="all-posts-two" data-filter="" data-count-theme="c">';
$.each(data.value.items, function(i, item) {
html += "<li>" + item.title + "</li>";
});
html += "</ul>";
//Add the feed to the page
$("#PostsList").empty().html(html);
$('#all-posts-two').listview('refresh');
}
});
它将增强动态添加的listview,当然还有一件事,您需要在完成整个动态列表之后触发它,而不是在每个li元素上,在这种情况下它将失败。在下一个示例中,您将使用以下行:
$('#all-posts-two').listview('refresh');
$("#all-posts").trigger("create");
$('#all-posts-two').enhanceWithin();
它将失败,因为触发器('create')用于增强整个数据角色=“content”而不仅仅是其中的一部分,因此它只能用于数据角色=“content”div
在另一个中阅读更多信息
或者看看我的博客,你会发现一个从远程JSON数据创建listview的工作示例
更新:
如果您使用的是jQuery Mobile 1.4,请尝试以下内容:
$('#all-posts-two').listview('refresh');
$("#all-posts").trigger("create");
$('#all-posts-two').enhanceWithin();
.enhanceWithin()是jQuery Mobile 1.4中引入的一种替代所有其他方法的方法
更新2
这个问题最终在另一个中得到了回答,或者您可以通过工作示例找到答案:非常感谢您的回答。我使用的是jQuery 2.0.3和JQM1.4.0。我尝试了您所说的,但它仍然显示在项目符号列表中,而不是jQM listview格式。是否有机会请您帮助使用扶手杆方法也请查看您的控制台并告诉我您是否收到任何错误?再次感谢您的回复。我刚试过你说的,还是一样的子弹清单格式。我在控制台上没有错误。你介意删除ajax()调用的完整源代码吗?如果你做错了,我甚至用你的代码创建了一个工作示例: