Backbone.js dynamic URL problems

Question

I have this Backbone.js model and view code, where I am trying to get a value from a text field, and fetch data from REST api based on this value. I am having problems modifying the base URL.

Model with base URL:

var TodoItem = Backbone.Model.extend({
        urlRoot : 'http://localhost/Codeigniter/index.php/testcontroller',

        initialize: function(){
          this.set('id', 1);
        },
        defaults: {
          name: '',
          age: ''
        }
       });
      var todoitem = new TodoItem({name: "name"});

Function where I am setting new URL:

getUrl: function(celebname){ 
        var urlstr = "http://localhost/Codeigniter/index.php/testcontroller/getdatabasedata?searchvalue="+celebname; 
        return urlstr; 
        },

Function that fetches data from the REST api.

getdata: function (event) { 
        var celebname = $('#celebname').val(); 
        this.model.set({name: celebname});
        this.model.save({}, { urlRoot: this.getUrl(celebname)});

        this.model.fetch();
      },

At the moment I am getting this error:

GET http://localhost/Codeigniter/index.php/testcontroller/1

I cannot change the base url using the getURL function to search for the value from input field.Instead is using the base url and the id at the end. If I am not setting out the ID in the initialize function of the model, then I get this error:

POST http://localhost/Codeigniter/index.php/testcontroller/getdatabasedata?searchvalue=Rome

From what I have read online this is because there is no id assigned to the model. How can I get the input field value, build the URL, and fetch data using the GET method? Thank you

what if you try this.model.urlRoot= this.getUrl(celebname); before this line this.model.save(); ? — Nikhil Chaudhary, Dec 26 '15 at 13:42

score 0 · Answer 1 · answered Dec 27 '15 at 06:20

Backbone works incredibly well with true RESTful APIs. Part of the issue here is that the API you have does not really map well with the Backbone model i.e. it's not exactly RESTful. As a result, you're going to have to resort to "hacks" to have the client and server get along. Dynamically modifying the route of a model is an example of one such hack.

What might help get you better answers is if you could elaborate a bit more on the use-case you have in mind.

From what I can tell, you're not really trying to persist a TodoItem. Rather, you're trying to pre-populate it with some base data. If this is true, then you really should not be doing a save -- you should just be doing a fetch.

getdata: function (event) { 
    var celebname = $('#celebname').val();
    var id = this.model.id;
    this.model.id = 'getdatabasedata';
    this.model.fetch({data: {searchvalue: celebname}});
    this.model.id = id;
}

Passing the data option will tell jQuery to use it as a query string param.

Again, this is very hacky and I would not recommend it, but it will accomplish what you're trying to do.

That's a very broad topic. See the answers in the following question to get you started: http://stackoverflow.com/questions/671118/what-exactly-is-restful-programming — anushr, Dec 27 '15 at 15:45

Backbone.js dynamic URL problems

1 Answers1