Blog

EmberJS – Creating and Deleting Records

You can create and delete the records on the instance of the model.

Syntax

import Ember from 'ember';

export default Ember.Route.extend ({
   model() {
      //code here
   },
   actions:{
      addNewCategory(id, name) {
         this.controller.get('model').pushObject({ var1,va2});
      },
      deleteCategory(category) {
         this.controller.get('model').removeObject(model_name);
      }
   }
});

Example

The example given below shows creation and deletion of records. Create a new route with the name record_demo and create one more route within this route and name it as categories. Now open the router.js file to define the URL mappings −

import Ember from 'ember';                   
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config 

//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

//Defines URL mappings that takes parameter as an object to create the routes
Router.map(function() {
   this.route('record_demo', function() {
      this.route('categories');
   });
});

//It specifies Router variable available to other parts of the app
export default Router;

Open the application.hbs file created under app/templates/ with the below code −

{{#link-to 'record_demo'}}Go to Records demo page{{/link-to}}
{{outlet}}

When you click the above link, it will open the record_demo template page, which is created under app/templates/. The record_demo.hbs file contains the fllowing code −

<h2>Welcome...Click the below link for Categories page</h2>
{{#link-to 'record_demo.categories'}}Go to Categories page{{/link-to}}
{{outlet}}

The above template page opens the categories.hbs file, which is created under app/templates/record_demo and contains the following code −

<h2>Categories Page</h2>
<form>
   <label>ID:</label>
   {{input value=newCategoryId}}
   <label>NAME:</label>
   {{input value = newCategoryName}}
   //when user adds records, the 'addNewCategory' function fires and adds 
      the records to model
   <button type = "submit" {{action 'addNewCategory' newCategoryId newCategoryName}}>
      Add to list
   </button>
</form>

<ul>
   {{#each model as |category|}}
      <li>
         Id: {{category.id}}, Name: {{category.name}} 
         //when user delete records, the ‘deleteCategory’ function fires and remove 
            the records from model
         <button {{action 'deleteCategory' category}}>Delete</button>
      </li>
   {{/each}}
</ul>

//it counts the number of added records and removed records from the model
<strong>Category Counter: {{model.length}}</strong>
{{outlet}}

Now open the categories.js file created under app/routes/record_demo with the following code −

import Ember from 'ember';

export default Ember.Route.extend ({
   model() {
      //model will display these records when you execute the code 
      return [{
         id: 1,
         name: 'Category One'
      }, {
         id: 2,
         name: 'Category Two'
      }];
   },

   actions: {
      //it adds records to model
      addNewCategory(id, name) {
         this.controller.get('model').pushObject({id,name});
      },
      
      //it removes the records from model
      deleteCategory(category) {
         this.controller.get('model').removeObject(category);
      }
   }
});

Output

Run the ember server; you will receive the following output −

When you click on the link, it will open the records_demo page with the categories page link −

create and delete the records

Next, the categories template page will open. Enter the id and name in the input box and click the Add to list button.

Next, click on the add button; you will see the added records in the list and number of count will get incremented.

If you want to remove the records from the list, then click the Delete button.

Previous Page:-Click Here

Leave a Reply