how to pass an id containing / in backbone.js

Question

HI my basic model which fetches data from server is working perfect. I want to implement a search feature. When user enters any data the request goes to browser and desired model is returned.

var Book = Backbone.Model.extend({
  urlRoot: '/books'
});

  render: function(options) {
  books = new Book({id:options.name});
  books.fetch();
   }

where

  name = "search/"+dynamic_data;

Request URL that is being formed when i pass --> 'life' in variable dynamic_data

  http://host/path/search%2Flife

Request URL that i want

 http://host/path/search/life

How can I encode/escape my string to achieve the desired result. I have tried escape(), encodeURI(), encodeURIComponents

1. A workaround to solve this is create one more model with urlRoot as /books/search and pass just name . I don't think this is correct. Should I use this ?

Answer 1

According to your additionnal precisions stating that life is actually a book name...

It looks like Backbone is better integrated with RESTful API's. In REST, your urls should not contain verbs and to search books, you would do a GET /books/?name=life .

In that case, you would only have to define a Backbone.Collection like:

var BooksCollection = Backbone.Collection.extend({
    model: Book,
    url: '/books'
});

The to fetch books:

var books = new BooksCollection();

books.fetch({data : {name: 'life'}}); //GET /books/?name=life

If you really want your search operation to target /search/:name , you will have to check the Backbone.Collection api, but I think you will want to look at http://backbonejs.org/#Sync

You could override your collection's sync method to something like:

Backbone.Collection.extend({
    ...
    sync: function (method, model, options) {

        //for read operations, call the search url
        if (method === 'read') {
            options.url = '/search/' + options.data.name;
            delete options.data.name;
        }

        //call the default sync implementation
        return Backbone.Collection.prototype.sync.apply(this, arguments);
    }
});

In this cased calling books.fetch({data : {name: 'life'}}); will result in GET /books/life .

Here's a fiddle that shows the example.

Answer 2

这将工作：

books = new Book({id:options.name}, {url: options.name));

Answer 3

encodeURIComponent（）会将http://host/path/search%2Flife为http://host/path/search/life 。