EmberJS-Finding Records

Finding Records

The Ember.js has store object's find method which used for to find the records. Based on an arguments the store object uses find, findAll, and findQuery methods and the first argument is the record type. The optional second argument for methods determines all records, a single record, or a query.

store.find();

In the above code, the store.find() method helps to find stored records in the store.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Finding Records</title>
      <!-- CDN's-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="search">
         <h1>Displaying details for the id value: {{info.id}}</h1>
         <p><b>info.id}}</b></p>
         <p><b>{{info.title}}</b></p> <p><b>{{info.content}}</b></p>
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         App.Router.map(function () {
            //search template
            this.route("search", { path: '/' });
         });

         //extending the Controller
         App.SearchController = Ember.Controller.extend();

         //extending the FixtureAdapter
         App.ApplicationAdapter = DS.FixtureAdapter.extend();

         App.SearchRoute = Ember.Route.extend({
            //INTEGRATING with the ROUTE'S MODEL HOOK
            model: function () {
               //return this.store.findAll('find'); To Find All Records

               //Finding A Single Record By Id Value
               return this.store.find('find',2);
            },
            //sets the model property of route
            setupController: function (controller, model) {
               controller.set('info', model);
            }
         });

         App.Find = DS.Model.extend({
            //data model
            title: DS.attr(),
            content: DS.attr()
         });

         //attach fixtures(sample data) to the model's class
         App.Find.FIXTURES = [{
            id: 1,
            title: 'Define Java',
            content: 'Java is pure object oriented language'},{
               id: 2,
               title: 'Define C',
               content: 'C is produre oriented language'
            }
         ];
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works −

  • Save above code in model_str_find.htm file

  • Open this HTML file in a browser.

Advertisements