EmberJS - Création et suppression d'enregistrements

Vous pouvez créer et supprimer les enregistrements sur l'instance du modèle.

Syntaxe

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);
      }
   }
});

Exemple

L'exemple ci-dessous montre la création et la suppression d'enregistrements. Créez une nouvelle route avec le nom record_demo et créez une autre route dans cette route et nommez-la en tant que catégories . Ouvrez maintenant le fichier router.js pour définir les mappages d'URL -

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;

Ouvrez le fichier application.hbs créé sous app / templates / avec le code ci-dessous -

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

Lorsque vous cliquez sur le lien ci-dessus, cela ouvrira la page de modèle record_demo, qui est créée sous app / templates / . Le fichier record_demo.hbs contient le code qui suit -

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

La page de modèle ci-dessus ouvre le fichier categories.hbs, qui est créé sous app / templates / record_demo et contient le code suivant -

<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}}

Ouvrez maintenant le fichier categories.js créé sous app / routes / record_demo avec le code suivant -

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);
      }
   }
});

Production

Exécutez le serveur de braises; vous recevrez la sortie suivante -

Lorsque vous cliquez sur le lien, cela ouvrira la page records_demo avec le lien de la page des catégories -

Ensuite, la page de modèle de catégories s'ouvrira. Entrez l'identifiant et le nom dans la zone de saisie et cliquez sur le bouton Ajouter à la liste comme indiqué dans la capture d'écran ci-dessous -

Ensuite, cliquez sur le bouton Ajouter; vous verrez les enregistrements ajoutés dans la liste et le nombre de comptage sera incrémenté -

Si vous souhaitez supprimer les enregistrements de la liste, cliquez sur le bouton Supprimer .