EmberJS- Working With Records

Working With Records

You can also change an attributes values when the record has been loaded and these behave like normal properties. Use the set() and get() method to deal with an attribute. By calling save() and rollback() method you can persist with changes of data.

var VarName = this.store.find();
VarName.set('attr', "value"); //after loading the record

In the above code, 'VarName' is the var name of the store.find() method and set the attr value by using the 'VarName'.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Working With 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" id="authors">
         <h3>List of Authors: </h3>
         {{#each author in content}}
            {{#link-to 'authors.rollback' author}}{{author.name}}{{/link-to}}<br/>
         {{/each}}
         {{outlet}}
      </script>

      <script type="text/x-handlebars" id="authors/rollback">
         <h3>Details</h3>
         <p><b>ID: {{id}}</b></p>
         <p><b>Name: {{name}}</b></p>
         <p><b>Book Name: {{books}}</b></p>
         <br/>
         <button {{action 'save'}}>Save changes</button>
         <button {{action 'cancel'}}>RollBack</button>
      </script>

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

         App.Router.map(function () {
            this.resource("authors", { path: '/' }, function () {
               this.route('rollback', { path: '/:author_id' });
            });
         });

         App.AuthorsRoute = Ember.Route.extend({
            model: function () {
               return this.store.find('author');
            }
         });

         App.AuthorsController = Ember.ArrayController.extend();

         App.AuthorsRollbackRoute = Ember.Route.extend({
            model: function(params) {
               return this.store.find('author', params.author_id);
            }
         });

         App.AuthorsRollbackController = Ember.ObjectController.extend({
            actions: {
               save: function () {
                  var author = this.get('model');
                  author.save().then(function () {
                     document.write("Record saved");
                  });
               },
               cancel: function () {
                  var author = this.get('model');
                  author.rollback();
                  document.write('Record Roll Backed');
               },
            }
         });

         //The store cache of all records available in an application
         App.Store = DS.Store.extend({
            //adapter translating requested records into the appropriate calls
            adapter: DS.FixtureAdapter.create()
         });

         App.Author = DS.Model.extend({
            //data Model
            name: DS.attr('string'),
            books: DS.attr('string'),
         });

         //attach fixtures(sample data) to the model's class
         App.Author.FIXTURES =[{
            id: 1,
            name: 'Herbert Schildt',
            books: 'C++'},{
            id: 2,
            name: 'Balaguruswamy',
            books: 'Java'
         }];
      </script>
   </body>
</html>

Output

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

  • Save above code in records_model.htm file

  • Open this HTML file in a browser.

Advertisements