15

Backbone.js を使用した JavaScript MVC アプリケーション開発を学習しており、ビューでのモデル コレクションのレンダリングに問題があります。これが私がやりたいことです:

  • ページの読み込みが完了したら、サーバーからデータをモデル コレクションとして取得します

  • ビューでそれらをレンダリングする

それが私がやりたいことのすべてであり、ここに私がこれまでに持っているものがあります:

$(function(){

    "use strict";

    var PostModel = Backbone.Model.extend({});

    var PostCollection = Backbone.Collection.extend({
        model: PostModel,
        url: 'post_action.php'
    });

    var PostView = Backbone.View.extend({
        el: "#posts-editor",        

        initialize: function(){
            this.template = _.template($("#ptpl").html());
            this.collection.fetch({data:{fetch:true, type:"post", page:1}});
            this.collection.bind('reset', this.render, this);
        },

        render: function(){
            var renderedContent = this.collection.toJSON();
            console.log(renderedContent);
            $(this.el).html(renderedContent);
            return this;
        }
    });

    var postList = new PostCollection();
    postList.reset();
    var postView = new PostView({
        collection: postList
    });

});

問題

私の知る限り、Chrome はサーバーからの応答をログに記録しており、必要な JSON 形式になっています。しかし、それは私の見解ではレンダリングされません。コンソールに明らかなエラーはありません。

サーバーには、GET パラメーターを受け取り、JSON をエコーするハンドラーがあります。 http://localhost/blog/post_action.php?fetch=true&type=post&page=1

[
   {
      "username":"admin",
      "id":"2",
      "title":"Second",
      "commentable":"0",
      "body":"This is the second post."
   },
   {
      "username":"admin",
      "id":"1",
      "title":"Welcome!",
      "commentable":"1",
      "body":"Hello there! welcome to my blog."
   }
]
4

4 に答える 4