url - 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.

score 13 · Accepted Answer

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

score 7 · Accepted Answer

I would fulfill the accepted answer with few remarks.

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

score 0 · Accepted Answer

I wanted to use the HATEOAS href from one model to fetch data of another model. It worked to simply set the url on the newly created collection instead of defining it right away in the constructor.

var DailyMeasuresCollection = Backbone.Collection.extend({
    //url : set dynamically with collection.url = url
    model : DailyMeasuresModel,
    parse : function(data) {
        return data._embedded.dailyMeasures;
    }
});

var DailyMeasuresTopicListItemView = Backbone.View.extend({
    //...

    events : {
        'click .select-topic' : 'onClick'
    },

    onClick : function() {
        var topicMeasures = new DailyMeasuresCollection()

        topicMeasures.url = this.model.attributes._links.measures.href // <- here assign

        var topicMeasuresView = new DailyMeasuresListView({
            collection : topicMeasures
        });
        topicMeasures.fetch()
    }
});

url - how to create dynamic url in collection and model using backbone

3 回答 3

Related

Reference