- EmberJS Tutorial
- EmberJS - Home
- EmberJS - Overview
- EmberJS - Installation
- EmberJS - Core Concepts
- Creating and Running Application
- EmberJS - Object Model
- EmberJS - Router
- EmberJS - Templates
- EmberJS - Components
- EmberJS - Models
- EmberJS - Managing Dependencies
- EmberJS - Application Concerns
- EmberJS - Configuring Ember.js
- EmberJS - Ember Inspector
- EmberJS Useful Resources
- EmberJS - Quick Guide
- EmberJS - Useful Resources
- EmberJS - Discussion
EmberJS - Creating and Deleting Records
You can create and delete the records on the instance of 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 −
Next, the categories template page will open. Enter the id and name in the input box and click the Add to list button as shown in the screenshot below −
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.
To Continue Learning Please Login
Login with Google