使用JSON API实现Backbone.js以检索类别帖子

时间:2014-03-13 作者:nanoo_k

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.

1 个回复
最合适的回答,由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>

结束

相关推荐

JSON:计划创建JSON文件

经过一些研究,我成功地创建了一个json文件,作为Twitter的typeahead(预回迁)的输入。在我的网站上,我有数百个活动和数千名艺术家(都是自定义帖子类型)。json文件是使用下面的函数创建的(只发布了一个函数,因为艺术家的函数是相同的,只是发布类型不同)。由于我们不断更新活动和艺术家,而且这两者都有很多,我想知道应该如何运行这些功能。我的想法是安排这个函数,这样它大约每天运行一次。经过更多的研究,我应该能够解决这个问题(使用this post).现在我的问题是,这是否是良好的做法。我认为安排每