0

我是主干新手，试图从 Wordpress json 插件中获取 json 并渲染到模板中，但是当循环浏览帖子时，我收到以下错误Uncaught ReferenceError: posts is not defined任何帮助表示赞赏。谢谢...

   jQuery(function($) {
    var Post = Backbone.Model.extend();
    var Posts = Backbone.Collection.extend({
        model: Post,
        url: '/api/get_post/?json=get_recent_posts',
        parse: function(resp) {
            console.log("posts", resp);
            return resp;
        }
    });
    var listView = Backbone.View.extend({
        el: '#content',
        template: _.template($("#post-template").html()),
        initialize: function() {
            this.model.bind("reset", this.render, this);
        },
        render: function() {
            $(this.el).html(this.template(this.model.toJSON()));
            return this;
        }
    });
    var AppRouter = Backbone.Router.extend({
        routes: {
            "!/archive": "archive"
        },
        archive: function() {
            this.postList = new Posts();
            this.postListView = new listView({
                model: this.postList
            });
            this.postList.fetch();
            this.postListView.render();
        }
    });
    var app = new AppRouter();
    Backbone.history.start();
});

模板

<script id="post-template" type="text/template">
    <ul>
      <% _.each(posts, function(post) { %>
        <li id="<%= post.id %>">
          <a href="<%= post.url %>"><%= post.thumbnail %></a>
        </li>
      <% }); %>
    </ul>
</script>

json

{
    "status": "ok",
    "count": 1,
    "count_total": 1,
    "pages": 1,
    "posts": [{
        "id": 4,
        "type": "post",
        "slug": "test-post",
        "url": "http:\/\/localhost:8888\/2013\/04\/test-post\/",
        "status": "publish",
        "title": "Test Post",
        "title_plain": "Test Post",
        "content": "",
        "excerpt": "",
        "date": "2013-04-17 15:12:21",
        "modified": "2013-04-19 14:13:00",
        "categories": [],
        "tags": [],
        "author": {
            "id": 1,
            "slug": "admin",
            "name": "admin",
            "first_name": "",
            "last_name": "",
            "nickname": "admin",
            "url": "",
            "description": ""
        },
        "comments": [],
        "comment_count": 0,
        "comment_status": "closed",
        "thumbnail": "http:\/\/localhost:8888\/wp-content\/uploads\/2013\/04\/test-image-150x150.jpg"
    }]
}
4

3 回答 3

1

调用Collection#toJSON将返回一个数组。因此没有posts钥匙。尝试使用$(this.el).html(this.template(this.model.toJSON()[0]));，因为您的收藏中只有一个模型（这很奇怪）。

您可能希望在parse返回的方法中解析您的响应，resp.posts以便您的集合具有更多意义，并且实际上为Post每个帖子创建一个模型。

于 2013-04-22T13:56:02.907 回答
0

尝试执行以下操作：

$(this.el).html({
   posts : this.template(this.model.toJSON())
});

代替：

$(this.el).html(this.template(this.model.toJSON()));
于 2013-04-22T13:56:32.350 回答
0

如果要posts在下划线模板中用作包含集合/数组的变量，则需要将其作为属性传递给模板函数：

$(this.el).html(this.template({ posts: this.model.toJSON() } ));

我还认为您的PostsCollection 类应该返回 parse函数中的帖子，如下所示（因为帖子是返回的 JSON 的属性）：

var Posts = Backbone.Collection.extend({
    model: Post,
    url: '/api/get_post/?json=get_recent_posts',
    parse: function(resp) {
        console.log("posts", resp);
        return resp.posts || [];  // grab the posts from the JSON 
    }
});

而且，通常按照惯例，您可能希望切换到使用collectionView 的属性：

this.postListView = new listView({
     collection: this.postList
});

然后更改您的模板调用：{ posts: this.collection.toJSON() }.

于 2013-04-22T14:44:32.340 回答