Best practice for live searching data store

Ember Data
1

I’m looking for clarification on whether this is the right way to go about searching.

Search page:

{{input valueBinding="query"}}
{{#each model}}
  {{partial 'searchResult'}}
{{/each}}

Search controller:

Ember.ArrayController.extend
  query: ''

  runQuery: ->
    @store
      .find 'things', query: @get 'query'
      .then (records) =>
        @set 'model', records

  queryObserver: (->
    Ember.run.debounce @, @runQuery, 300
  ).observes 'query'

The above produces the desired behaviour - and although ember js prefers convention over configuration it feels like there is still a lot of ways to do the same thing.

Appreciate any thoughts.

2

I think a good rule of thumb is that any time the state of your application changes, it should be handled by the router. In your case, if the user hits refresh, then you’re losing the state of the search.

With the ever-to-be-coming query-params feature, this will be fairly trivial

In the meantime, there’s a few other things you can do. For example, you could serialize the query into a normal URL segment…that could looks something like this:

App.Router.map(function() {
  this.route('Search', {path: '/:query'});
});

App.SearchRoute = Ember.Route.extend({
  actions: {
    runQuery: function(query) {
      this.transitionTo('search', this.store.find('things', {query: query}));
    }
  },
  model: function(params) {
    return this.store.find('things', {query: params.query});
  }
});

App.SearchController = Ember.ArrayController.extend({
  query: Em.computed.oneWay('model.query.query'),
  queryObserver: function() {
    Ember.run.debounce(this, 'send', 'runQuery', this.get('query'));
  }.observes('query')
});
2 Likes