Create simple search app


#1

I am new to Enber.js. I am trying to create a simple search app.

On the index page, i have a input box to take the last name as the input by clicking the search button. My task is to search for the last name in the DS.store and display the corresponding first name on the employee page (or the same index page). I have tried few things but unable to succeed in finding the model from the DS.store based on the lastname

Any help with this is appreciated…

html body:

<body>
  <script type="text/x-handlebars" id="application">
  {{outlet}}
  </script>
  
  <script type="text/x-handlebars" id="index">
    <div class="emp">
      <label>Enter employee last name :</label>
      {{input value=lastName}}
      <br>
      <br>
      <button {{action "search"}}>Search</button>
      {{outlet}}
    </div>
  </script>

  <script type="text/x-handlebars" id="employee">
    <h2>{{firstName}}</h2>
  </script>

 <script src="app.js"></script>
</body>

app.js

App = Ember.Application.create({
  LOG_TRANSACTIONS: true
});

App.Router.map(function() {
  this.route('employee', {path: ':employee_lastName'} );
});

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return Ember.Object.create({});
  }
});

App.EmployeeRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('employee', {lastName: params.lastName} );
  },
  serialize: function(employee){
    return { employee_lastName: employee.lastName };
  } 
});

App.Store = DS.Store.extend({
  adapter: DS.FixtureAdapter
});

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

App.Employee.FIXTURES = [{
  id: 1,
  firstName : 'scott',
  lastName : 'lane'
}, {
  id: 2,
  firstName : 'Mike',
  lastName : 'Razor'
}];

App.IndexController = Ember.ObjectController.extend({
  actions: {
    search: function() {
      var lastName = this.get('lastName');
      this.transitionToRoute('employee', {lastName: lastName});
    }
  }
});