CODEWITHSUNDEEP
javascriptbackbone.js
Reina Lyn Ben
Reina Lyn Ben

Reputation: 39

Backbonejs - in collection, how do we access this.var from initialize function?

What I am trying to accomplish is pass this Post model ID to a collection so I can populate this specific Post id with other models that are associated with it. For example: In a Blog Post, contains a bunch of Comments. and I want to display those comments pointing to this Blog Post only.

I must be missing something fundamental here.

Below is my Post Model and i am instantiating a new CommentCollection and passing along models and options arguments.

var PostModel = Backbone.Model.extend({
  initialize: function() {
    /*
     * we are connecting Comments collection
     * to each post item by passing along post id
     * */
    this.comments = new CommentsCollection([], { id: this.id });
  },
  defaults: {
    title: 'title here',
    body: 'body here'
  },
  urlRoot: localserver + "/posts"
});

Below is my Comment Collection. console.log(this.id); returns undefined.

var CommentsCollection = Backbone.Collection.extend({
  initialize: function(models, options) {
    this.id = options.id;
    console.log(this.id);
    return this;
  },
  url: function() {
    console.log(this.id);
    return localserver + "/posts/" + this.id + "/comments";
  },
  model: CommentModel
});

my console is returning this:

Uncaught TypeError: Cannot read property 'id' of undefined
3

Upvotes: 0

Views: 315

Answers (1)

Neil Villareal
Neil Villareal

Reputation: 637

Try this code:

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

var CommentsCollection = Backbone.Collection.extend({
  model: CommentModel,
  initialize: function(models, options) {
    this.id = options.id;
    if(typeof this.id === 'undefined') { return; }
    this.url();
  },
  url: function() {
    var localserver = "localhost";
    console.log('from comment url: ', this.id);

    return localserver + "/" + this.id + "/comments";                  
  }
});


var PostModel = Backbone.Model.extend({
  urlRoot: "http://jsonplaceholder.typicode.com" + "/posts",
  initialize: function(option) {
    this.comments = new CommentsCollection([], { id: option.id });
  }
});

//var pm = new PostModel();
//pm.comments.fetch();
//console.log('from pm: ', pm.comments.url());

var PostsCollection = Backbone.Collection.extend({
  model: PostModel, 
  url: "http://jsonplaceholder.typicode.com" + "/posts?_sort=views&_order=DESC",
  initialize: function() {
    this.on('reset', this.getComments, this);
  },
  getComments: function() {
    this.each(function(post) {
      post.comments = new CommentsCollection([], { post: post });
      post.comments.fetch();
    });
  }
});

var pc = new PostsCollection();
pc.fetch();

What I did is that I use the option parameter of the PostModal. Below is the code.

var PostModel = Backbone.Model.extend({
  urlRoot: "http://jsonplaceholder.typicode.com" + "/posts",
  initialize: function(option) {
    this.comments = new CommentsCollection([], { id: option.id });
  }
});

Upvotes: 1

Related Questions