Ember route with dynamic filter / search criterias

Question

With the following problem I got stuck now for days. My use case is that I have a database with millions of addresses. From an web-application I would like to search them, d

Answer 1

Based on the answer from intuitivepixel I came up with the following solution.

I construct the following URL: http://somedomain.com/#/searchresults/?lastname=king&firstname=stephen&city=somecity

The way how this URL is contructed is not described here. In my case I use a my own view with a form and some event handlers.

The code that I got working looks like this:

App.Router.map(function() {
    this.resource("searchresults", { path: '/searchresults/:dynamic' });
});

App.SearchresultsRoute = Ember.Route.extend((function() {
    var deserializeQueryString = function (queryString) {
        if(queryString.charAt(0) === "?")
            queryString = queryString.substr(1);

        var vars = queryString.split('&'),
            i = 0, length = vars.length,
            outputObj = {};

        for (; i < length; i++) {
            var pair = vars[i].split('=');
            outputObj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
        }
        return outputObj;
    };

    return {
          model: function(param) {
            var paramObj = deserializeQueryString(param.dynamic);
            return App.Searchresult.find(paramObj);
          }
        };
    })()
);

App.Store = DS.Store.extend({
    revision: 12,
    adapter: DS.RESTAdapter.create({
        namespace: 'api'
    })
});

App.Searchresult = DS.Model.extend({
    lastname: DS.attr('string'),
    firstname: DS.attr('string'),
    street: DS.attr('string'),
    hno: DS.attr('string'),
    zip: DS.attr('string'),
    city: DS.attr('string'),
    country: DS.attr('string'),
    birthdate: DS.attr('string')
});

This generates an HTTP GET request to my REST API:

http://somedomain.com/api/searchresults?lastname=king&firstname=stephen&city=somecity

My REST API responds with:

{"searchresults":
    [{"id":"2367507","lastname":"King","firstname":"Stephen","street":"Mainstreet.","hno":"21" ...},
     {"id":"3222409","lastname":"King","firstname":"Stephen","street":"Broadway","hno":"35" ...}
    ]}

And this then gets visualized with this template:

<h2>Searchresults</h2>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Street / Hno</th>
            <th>City</th>
            <th>Birthyear</th>
        </tr>
    </thead>
    <tbody>
    {{#each item in controller}}
        <tr>
            <td>{{item.firstname}} {{item.lastname}}</td>
            <td>{{item.street}} {{item.hno}}</td>
            <td>{{item.zip}} {{item.city}}</td>
            <td>{{item.birthdate}}</td>
        </tr>   
    {{/each}}
    </tbody>
</table>

If somebody finds a more elegant way, that does not require to use a custom deserializer, I will be glad to update the solution. The answer provided by (the other) Daniel that suggests http://somedomain.com/#/searchresults/king/stephen/somecity is not parctial for my case, since in the solution that I need, I have more than 10 different search criterias / filters. Users usually only choose to fill a few of them.

This examples base on ember-data revision: 12 and Ember 1.0.0-RC.3

Answer 2

I've got URL that contains information about news page number and depending on this it sends and ajax call. My router looks like:

App.Router.map(function() {
    this.resource('news', { path: '/n/:id' });
});

But you could also do it like:

App.Router.map(function() {
        this.resource('searchresults', { path: '/searchresults/:lastname/:firstname/:city' });
    });

And your URL would look like this:

http://localhost/#/searchresults/king/stephen/somecity

Then you just specify:

App.SearchresultsRoute = Em.Route.extend({
    model: function(params) {
        var lastname = params.lastname;
            var firstname = params.firstname;
            var city = params.city;
            someFunction(lastname, firstname, city);
    }
});

I hope my answer helped you. Have a nice day!

Answer 3

To take advantage of ember data you could do it this way. Assuming you have a model like this:

App.SearchResult = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  city: DS.attr('string')
});

and then you do in your Route's model hook you do this:

App.SearchResultsRoute = Ember.Route.extend({
  model: function(params){
    return App.SearchResult.find({firstName:params.firstName,lastName:params.lastName,city:params.city})
  }
});

this way the RESTAdapter will automatically issue a request like your example:

http://localhost/#/searchresults?firstname=xxx&lastname=xxx&city=xxx

Hope it helps