Search code examples
ember-cli

emberjs load the model data with search


I have created a route, for search which is searching users, and the application.hbs is having the search form, below are the segments of my code.

ROUTER router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

export default Router.map(function() {
  this.resource('search', {path: '/search/:citySef/:group'});
});

Route application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    return Ember.RSVP.hash({
      groups: this.store.find('group'),
      cities: this.store.find('city', {type: 'filled'})
    });
  },
  setupController: function(controller, models) {
    controller.setProperties(models);
  }
});

Route search.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params){
    return Ember.RSVP.hash({
      users: this.store.find('user', {citySef: params.citySef, group: params.group})
    });
  },
  setupController: function(controller, models) {
    controller.setProperties(models);
  }
});

Controller application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  isProcessing: false,
  selectedCity: null,
  selectedGroup: null,

  actions: {
    submitSearch: function () {
      this.setProperties({
        isProcessing: true
      });

      var citySef = this.get("selectedCity");
      var group = this.get("selectedGroup");

      console.log(citySef, group);
      this.transitionToRoute('search', {citySef:citySef, group:group});
    }
  }
});

Controller search.js

import Ember from 'ember';

export default Ember.Controller.extend({
});

So basically I am creating a url like localhost:4200/search/City/Group to search users within a city with specific group.

When I press the search button, i can see that the URL is changed in the address bar from localhost:4200 to localhost:4200/search/City/Group but it dont send request to server to get data from REST, but when i do refresh the page, then it loads the data.

Edit

I have included pretty much everything apart from templates.

Edit 2015-04-22

I have uploaded the package (without bower and npm packages) to https://drive.google.com/file/d/0B5slzmNBINvNMHNjcXdqNWlCeUk/view?usp=sharing


Solution

  • As per Neha suggested, it was related to setupController

     setupController: function (controller, models) {
        if (models.citySef) {
          controller.set('model', this.store.find('user', {citySef: models.citySef, group: models.group}));
        } else {
          controller.set('content', models);
        }
    
      }
    

    So when page loads it goes to else condition, and if i transitiontoroute it goes in if conditon. I think this can be cleaned but so far it is working for me.