Note: 在解决了我原来的问题后,我重新制定了这篇文章,因为我立即遇到了另一个可以放在同一标题下的问题。首先,我将总结第一个问题和我的解决方案,然后继续第二个问题
我的Wordpress 3.8安装设置为与Jetpack的JSON API配合使用。但是我的脊梁骨。js GET请求被取消(由Google Chrome的网络面板指示)。此外,我在控制台中得到了以下报告:
XMLHttpRequest cannot load http://public-api.wordpress.com/rest/v1/sites/americawasnotfree.org/posts/?category=life-after-the-treaties. No \'Access-Control-Allow-Origin\' header is present on the requested resource. Origin \'http://americawasnotfree.org\' is therefore not allowed access.
Solution: 使用
JSON API plugin from dphiffer 而不是Jetpack的解决方案。
NEW ISSUE: 现在,尽管我得到了数据,但我还不知道如何使用下划线的模板框架来处理它。我在跟踪this tutorial. 下面是我的错误代码(包括Dato建议的代码),下面是我尝试过的代码。
<div class="posts"></div>
<script type="text/template" id="posts-list-template">
<div>Here is the...</div>
<% _.each(yourListPosts, function(yourListPost) { %>
<%= yourListPost.get(\'title\') %>
<% }); %>
</script>
<script type="text/javascript">
(function($){
$( document ).ready(function() {
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.url = \'//americawasnotfree.org/api/\' + options.url;
});
var Post = Backbone.Model.extend({});
var Posts = Backbone.Collection.extend({
model: Post,
url:\'get_category_posts/?slug=life-after-the-treaties/\'
});
var PostsList = Backbone.View.extend({
el: \'.posts\',
render: function() {
var that = this;
var posts = new Posts();
posts.fetch({
success: function(posts) {
var template = _.template($(\'#posts-list-template\').html(), {
yourListPosts: that.collection.models
});
that.$el.html(template);
}
})
}
});
var Router = Backbone.Router.extend({
routes: {
"": "category"
}
});
var postsList = new PostsList();
var router = new Router();
router.on(\'route:category\', function() {
postsList.render();
});
Backbone.history.start();
});
})(jQuery);
</script>
我以多种方式修改了#帖子列表模板:
已通过posts
作为中的数据参数_.template()
, 然后尝试使用括号表示法遍历对象:posts["responseJSON"]["posts"][0]["content"]
. (如果我从Google Chrome的控制台将返回的对象分配给一个变量,我可以使用这个符号获取第0篇文章的“内容”。
通过jQuery.parseJSON( data )
(认为数据可能没有正确解析)。
我知道_.template()
正在正确传递模板。该函数在中放置时成功显示div和示例文本#posts-list-template
.
最合适的回答,由SO网友:nanoo_k 整理而成
我使用下面的代码显示了从JSON返回的数据。
注意,我使用JavaScript括号表示法访问posts数组,而不是主干数组。获取方法。还请注意,获取的对象被传递给一个名为posts的变量,然后该变量被传递给\\uu0。样板我敢打赌,正是这一点阻止了我使用主干。get方法,但我将把问题保存到单独的线程中。
<script type="text/template" id="posts-list-template">
<div>Here is the...</div>
<% _.each(posts, function(post) { %>
<div><%= post[\'title\'] %></div>
<%= post.content %>
<% }); %>
</script>
<script type="text/javascript">
(function($){
$( document ).ready(function() {
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.url = \'//americawasnotfree.org/api/\' + options.url;
});
var Posts = Backbone.Collection.extend({
url:\'get_category_posts/?slug=life-after-the-treaties/\'
});
var PostsList = Backbone.View.extend({
el: \'.posts\',
render: function() {
var that = this;
obj = new Posts();
obj.fetch({
success: function() {
posts = obj["models"][0]["attributes"]["posts"];
var template = _.template($(\'#posts-list-template\').html(), posts );
that.$el.html(template);
}
})
}
});
var Router = Backbone.Router.extend({
routes: {
"": "category"
}
});
var postsList = new PostsList();
var router = new Router();
router.on(\'route:category\', function() {
postsList.render();
});
Backbone.history.start();
});
})(jQuery);
</script>