how to create dynamic url in collection and model using backbone

Question

My collection and model like this:

detail_userid = 0;
detail_contactid = 0;
var ContactDetail = Backbone.Model.extend({  
    urlRoot: URL_CONTACTS1+detail_userid+"/"+detail_contactid
});

var ContactDetailCollection =  Backbone.Collection.extend({ 
    model: ContactDetail,
    url: URL_CONTACTS1+detail_userid+"/"+detail_contactid
})

The entrance is:

ContactDetailManagePageModel.prototype.init = function(m,n){ 
    detail_userid = m;
    detail_contactid = n;
    var myContactDetails = new ContactDetailCollection();
    var contactDetailListView = new ContactDetailListView({
            collection: myContactDetails
        });     
    myContactDetails.fetch({reset:true});
}

But when it runs,the url is :http://localhost:8080/ws/users/contacts/0/0,it means that the assignment to detail_userid and detail_contactid is unsuccessful,I don't know why.

Hope for your help.Thanks.

Answer 1

I think you are statically definining the urlRoot and url properties before you are running the init of the PageModel (not quite sure where you are getting m and n from though...)

Both url and urlRoot can be a function, so you can pass in options during instantiation and have them dynamically set on the model.

Simple example covering defining the collection and then creating one

var ContactDetailCollection = Backbone.Collection.extend({ 
    model: ContactDetail,
    url: function(){
      return URL_CONTACTS1 + this.options.detail_userid + "/" + this.options.detail_contactid;
    }
});

var myContactDetails = new ContactDetailCollection({
  detail_userid: foo,
  detail_contactid: bar
});

As I mentioned, I'm not sure what your init function is doing, I'm guessing it's something custom from your app that I don't need to worry about.

I'm fairly sure the main thing to take away is to set url and urlRoot dynamically

Answer 2

I would fulfill the accepted answer with few remarks.

1. First parameter when initializing Backbone.Collection is array of models, then options. To create an empty collection with options you should do next

   var c = new Backbone.Collection(null, {opt1: val1, opt2: val2});

2. Actually, you can't access this.options in url function, bec. there are no options like in a model. What you can do, is assign required properties from options upon initialization.

---

initialize: function (models, options) {
    // `parseInt()` is used for consistency that `id` is numeric, just to be sure
    this.detail_userid = parseInt(options.detail_userid);
    this.detail_contactid = parseInt(options.detail_contactid);
}

Later you can access them like this:

url: function() {
    return URL_CONTACTS1 + this.detail_userid + "/" + this.detail_contactid;
}