Amber route with dynamic filters / search criteria

Question

I’ve been stuck with the next problem for several days. My use case is that I have a database with millions of addresses. From a web application, I would like to find them, display a list of results and later display information about a single address. One important goal is to present your search criteria as part of the URL. This way, users can return to previous searches or even build a search by manipulating the URL. Therefore, I would like to have a URL like this:

http://localhost/#/searchresults?lastname=king&firstname=stephen&city=somecity 

I am unable to configure the router to handle these URLs. All subjects ended in a dead end. How to get ember to go to the / searchresults route and how to redirect these filter criteria using RESTAdapter?

Answer 1

Based on the answer from an intuitive pixel, I came up with the following solution.

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

The way this project is resolved is not described here. In my case, I use my own view with a form and some event handlers.

The code I received is as follows:

 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 for my REST API:

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

My REST API responds:

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

And then this is visualized using 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 someone finds a more elegant way that doesn't require the use of a custom deserializer, I will be happy to update it. The answer provided by (other) Daniel, which offers http://somedomain.com/#/searchresults/king/stephen/somecity , is not passive for my case, because in the solution I need I have more than 10 different searches criteria / filters . Typically, users select only a few of them.

This sample base is ember-data: 12 and Ember 1.0.0-RC.3

Answer 2

To take advantage of ember data, you can 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 this in your hook of the Route model:

 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, for example, your example:

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

Hope this helps

Answer 3

I have a URL that contains information about the number of the news page, and depending on this, it sends an ajax call too. My router looks like this:

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

But you can also do this:

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

And your url will look like this:

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

Then you simply 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!