Ember.js, Rails and Ransack –– Advanced Search

I’ve been attempting to learn Ember.js recently, and couldn’t find any existing solutions for advanced search. My aim, to be more specific was to utilize in my Ember application the Ransack search capabilities available in my Rails API.

I made various attempts trying to make this happen including experimenting with queryParams from the Ember 1.7.0 beta. This is what I have as a working solution, if only a temporary one…

From any page within a given area of the site, the user can click to visit that section’s “search” route:

<li>{{#link-to 'clients.search'}}Search{{/link-to}}</li> 

router.coffee:

App.Router.map ->
    @resource "items", ->   
        @route "search", {path: "/search"}

The search template features a form for the Ransack search, e.g.:

<label>Name</label>
{{input value=params.name_cont class="form-control"}}   
<button {{action 'search' this}}>Search</button>
<button {{action 'view_all'}}>View All</button>

itemssearchcontroller.js.coffee

The search controller “needs” the main items controller.

It has a params attribute which is where the Ransack search fields live.

It has a “search” action, and a “view_all” action

The search action takes the form fields and does a find to my Rails API, this supplies the Rails API with the necessary Ransack query parameters.

Once the records have been found, it sets the model of the main items controller to use the result set.

If the user wants to switch back to the complete list of records, they can click ‘View All’ , which sets the main items controller model back to the original cached result.

App.ItemsSearchController = Ember.ObjectController.extend(
    needs: "items" # to access items controller
    params: {} # to store search params
    actions:

        search: (item) ->
            @items = @store.find 'item', {q: this.params}
            this.get('items').set('model', @items)

        view_all: ->
            @items = @store.all 'item'
            this.get('controllers.clients').set('model', @items) 
)

items_route.js.coffee:

App.ItemsRoute = Ember.Route.extend(model: ->
    @store.find "item"
)

App.ItemsSearchRoute = Ember.Route.extend()

I’m not 100% thrilled with this solution, but it is the first working solution I have found. Would prefer to get queryParams working here so that the search results would have a serialized URL. I welcome feedback on how to improve this solution: I’m just in the beginning stages of learning Ember.

I am available for Ember and Ruby on Rails consulting work – get in touch to learn more.