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>

ジェイソン

{
    "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が返されます。したがって、鍵はありません。コレクションにモデルが 1 つしかないので、使用してみてください (これは奇妙です)。posts$(this.el).html(this.template(this.model.toJSON()[0]));

コレクションがより意味のあるものになり、実際には投稿ごとに1つのモデルが作成されるように、parse返されるメソッドで応答を解析することができます。resp.postsPost

于 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() } ));

Postsまた、 Collection クラスは、 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 
    }
});

collectionそして、多くの場合、慣例により、View の属性を使用するように切り替えたいと思うかもしれません:

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

次に、テンプレート呼び出しを変更します: { posts: this.collection.toJSON() }.

于 2013-04-22T14:44:32.340 に答える