Question

注意：我在解决原来的问题之后重新编写了这篇文章，因为我立即遇到了另一个可以适合同一标题的问题。首先，我将总结第一个问题和我的解决方案，然后继续第二个问题。

我的Wordpress 3.8安装设置为与Jetpack's JSON API一起使用。但是我的backbone.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.

解决方案：使用JSON API plugin from dphiffer代替Jetpack的解决方案。

新问题：现在即使我收到了数据，我还没有弄清楚如何使用Underscore的模板框架来处理它。我正在关注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-list-template：

在posts中传递_.template()作为数据参数，然后尝试使用括号表示法遍历对象：posts["responseJSON"]["posts"][0]["content"]。（如果我将返回的对象分配给Google Chrome控制台中的变量，我可以使用此表示法获取帖子编号0的“内容”。
通过jQuery.parseJSON( data )传递获取的数据（认为数据可能无法正确解析）。
我知道_.template()正确传递模板。放置在#posts-list-template中时，该功能会成功显示div和示例文本。

Answer 1

我建议你使用我的代码

的javascript

    (function($) {
    $(document).ready(function() {
        var Post = Backbone.Model.extend({});
        var Posts = Backbone.Collection.extend({
            model:Post,
            url: 'public-api.wordpress.com/rest/v1/sites/americawasnotfree.org/posts/?category=life-after-the-treaties'
            // url: 'http://backbonejs-beginner.herokuapp.com/users'
        });
        var PostsList = Backbone.View.extend({
            el: '.posts',
            render: function() {
                var that = this;
                var posts = new Posts();
                posts.fetch({
                    success: function() {
                        var template = _.template(yourViewTemplate, {
                            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);

HTML

<% _.each(yourListPosts, function(yourListPost) { %>
<%= yourListPost.get('name') %>
<% }); %>

Answer 2

我改为使用dphiffer的JSON API Wordpress插件。

它非常易于使用，我通过使用此字符串成功获得了我想要的帖子：http://americawasnotfree.org/api/get_category_posts/?slug=life-after-the-treaties/

感谢Dato的帮助。

如果有人有使用Jetpack的JSON API的解决方案，我很乐意听到它。

Answer 3

我设法使用下面的代码显示从JSON返回的数据。

请注意，我使用JavaScript括号表示法来访问posts数组而不是Backbone的.get方法。另请注意，获取的对象将传递给名为posts的变量，然后传递给_.template。我打赌这是阻止我使用Backbone的.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>

实现backbone.js以检索Wordpress类别帖子

3 个答案: