Home/ Questions/Q 8306469
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T18:20:14+00:00

I am building a comment object using Backbone.js. The URL in the collection returns

  • 0

I am building a comment object using Backbone.js.
The URL in the collection returns json that looks like this:

        {'type': 'comment', 
        'data': [{"body": "commment number 1!", 
                "create_dt": 1343166264000, 
                "comment_id": 1, "depth": 0, 
                "user": {"sid": "1", 
                    "uid": "1", 
                    "name": "Amie C", 
                    "level": "2"}, 
                "sid": 1
                }, 
                {"body": "commment number 1-1!", 
                "create_dt": 1343166361000, 
                "comment_id": 4, 
                "depth": 1, 
                "user": {"sid": "1", 
                        "uid": "1", 
                        "name": "lila M", 
                        "level": "2"}, 
                "sid": 1}
                }]
        }

The url works in the browser and I was able to see all my json coming back. However, the problem I am having is there is no data coming back when loading the comment.js. I would see a Get request that’s red yet said 200 OK and has no body in the response. Also my model’s lenth is 0.

Thanks much in advanced.

Here is comment.js:

    //default comment model
    var Comment = Backbone.Model.extend({
        defaults: {
            body: "",
            create_dt: null,
            comment_id: null,
            depth: null,
            user: null,
            sid: null
        }
    });

    //instaitiate a new comment
    var comment = new Comment;

    //default event view
    var CommentView = Backbone.View.extend({
        tagName: "li",
        className: "comment",
        initialize: function(){
            this.render();
        },
        render: function(){
            $(this.el).html(this.model.toJSON());
            return this;
        }
    });


    //default comments collection
    var Comments = Backbone.Collection.extend({
        model: Comment,
        initialize: function(){
        },
        url:"http://127.0.0.1/test/objects/json/comments.json",
        parse: function(resp) {
            return resp.data;
        }
    });

    //default eventsview for events collection's view
    var CommentsView = Backbone.View.extend({
        tagName: "ul",
        className:"comments",
        intialize: function(){
            this.render();
        },
        render: function(){
            _.each(this.collection.models, function(comment){
                //init the CommentView and passed in its model here
                var commentView = new CommentView({model: comment});
                $(this.el).prepend(commentView.render().el)
            }, this);

            return this;
        }
    });

    //instantiate new events collection
    var comments = new Comments;
    var commentsView = new CommentsView({collection: comments});


    //on the new events collection, we fetch the data from URL
    comments.fetch({
        error:function(response, xhr){
            console.log(response);
            console.log(xhr)
        },
        success:function(){
            console.log("success");
            $('.comments_container').html(commentsView.render().el);
        }
    });

And the html looks like this:

    <!DOCTYPE html>
    <head>
      <meta charset="utf-8">
        <title>Share</title>
        <link rel="stylesheet" href="share.css" type="text/css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
        <script src="http://backbonejs.org/backbone-min.js"></script>​
        <script src="js/comment.js"></script>
    </head>
    <body>
        <div class="main_app">
            <div class="comments_container"></div>
        </div>
    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem I think is here in CommentView:

        render: function(){
        $(this.el).html(this.model.toJSON());
        return this;
    }

    this.model.toJSON() does not return a string, so it won’t show when you place it directly into the html like that.

    Try this instead:

            $(this.el).html(JSON.stringify(this.model));
    • 0