在Yahoo管道中使用Handlerbars [英] Using Handlerbars with Yahoo Pipes
问题描述
我试图用jQuery的ajax方法将JSON源从yahoo管源拉入到我的jQuery Mobile项目中，使用Handlebars.js。
这种方法没有把手，但有一些限制。它不会以jquerymobile listview格式显示，而是会像普通的项目符号列表一样弹出。来源：
var pipeURL =http://pipes.yahoo.com/pipes/pipe.run?_id= mu3NkfY_3BGtncSIJhOy0Q&安培; _render = JSON;
$ .ajax（{
url：pipeURL，
dataType：json，
成功：函数（数据）{
console.log数据）;
var html ='< ul data-role =listviewid =all-posts-twodata-filter =data-count-theme =c>';
$ .each（item.title +< / li>;
}）;
html + =< / ul>;
//将feed添加到页面
$（＃PostsList）。empty（）。 html（html）;
}
}）;
以下是我一直试图使用Handlebars的其他方法的源代码，但显然我是
$ .ajax（{
url：pipeURL，
dataType：json ，
成功：函数（数据）{
//线路检查控制台上收到的数据
console.log（data）;
// handlebars area
var source = $（＃posts-template）。html（）;
var template = Handlebars.compile（source）;
var blogData =模板（数据）;
$（＃all-posts）。append（blogData）;
$（＃all-posts）。trigger（create）;
dfd .resolve（data）;
}，
error：function（data）{
// console.log（data）;
}
} ）;
以下是模板的html源代码
< ul data-role =listviewid =all-postsdata-filter =>< / ul>
< script id =posts-templatetype =text / x-handlebars-template>
{{#each value.items}}
< li data-postid ={{ID}}>
< a data-transition =slidehref =＃>
< p> {{{title}}}< / p>
< / a>
< / li>
{{/ each}}
< / script>
任何人，请帮助我
从我看到你使用的是旧版本的jQuery Mobile（低于1.4）。
像这样做：
var pipeURL =http://pipes.yahoo.com/pipes/pipe.run?_id=mu3NkfY_3BGtncSIJhOy0Q&_render = JSON;
$ .ajax（{
url：pipeURL，
dataType：json，
成功：函数（数据）{
console.log数据）;
var html ='< ul data-role =listviewid =all-posts-twodata-filter =data-count-theme =c>';
$ .each（item.title +< / li>;
}）;
html + =< / ul>;
//将feed添加到页面
$（＃PostsList）。empty（）。 html（html）;
$（'＃all-posts-two'）。listview（'refresh'）;
}
}）;
看看这一行：
$（ '＃全帖子-两个'）列表视图（ '刷新'）。
它会增强动态添加的listview，当然还有一件事情，你需要在触发后整个动态列表已经完成，而不是每个li元素，在这种情况下它将失败。在你的下一个例子中，你正在使用这一行：
$（＃all-posts）。trigger（create） ;
它会失败，因为触发器（'create'）用于增强整个数据角色=内容不只是它的一部分，因此它应该只用于 data-role =content div。
阅读更多有关它的信息 answer 。 .gajotres.net / advanced-jquery-mobile-tutorial-part-2-client-server-communication /rel =nofollow noreferrer> article ，你会发现一个工作
更新：
如果您使用的是jQuery Mobile 1.4，请试试这个line：
$（'＃all-posts-two'）。enhanceWithin（）;
.enhanceWithin（）是jQuery Mobile 1.4中引入的方法，用于替换所有其他方法。
更新2
这个问题终于在另一个 问题 ，或你可以在 here 找到它工作示例：
I'm trying to pull JSON feeds from a yahoo pipes source into my jQuery Mobile project using Handlebars.js with jQuery's ajax method. This method works without Handlebars, but there are some limitations. It doesn't show up in jquerymobile listview format, instead it pops out like a normal bullet list. Here's the source:
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);
}
});
Here's the source for the other method I've been trying to use with Handlebars but obviously I'm missing something somewhere.
$.ajax({
url : pipeURL,
dataType : "json",
success : function(data) {
//line to check the received data on the console
console.log(data);
//handlebars area
var source = $("#posts-template").html();
var template = Handlebars.compile(source);
var blogData = template(data);
$("#all-posts").append(blogData);
$("#all-posts").trigger("create");
dfd.resolve(data);
},
error : function(data) {
// console.log(data);
}
});
Here's the html source for the template
<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>
Anyone, please help me out please
From what I can see you are using an older version of jQuery Mobile (lower then 1.4).
Do it like this:
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');
}
});
Look at this line:
$('#all-posts-two').listview('refresh');
It will enhance dynamically added listview, of course there's one more thing, you need need to trigger it after whole dynamic list has been done and not on every li element, it will fail in this case. In your next example you are using this line:
$("#all-posts").trigger("create");
It will fail because trigger('create') is used to enhance whole data-role="content" not just part of it so as such it should be used only on data-role="content" div.
Read more about it in this other answer.
Or take a look at my blog article, there you will find a working example of listview created from remote JSON data.
Update:
If you are using jQuery Mobile 1.4 try this line:
$('#all-posts-two').enhanceWithin();
.enhanceWithin() is method introduced in jQuery Mobile 1.4 to replace all other methods.
Update 2
This question is finally answered in another question, or you can find it here with working example:
这篇关于在Yahoo管道中使用Handlerbars的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
