EmberJS - Creación y eliminación de registros
Puede crear y eliminar los registros en la instancia del modelo.
Sintaxis
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);
}
}
});
Ejemplo
El ejemplo que se muestra a continuación muestra la creación y eliminación de registros. Cree una nueva ruta con el nombre record_demo y cree una ruta más dentro de esta ruta y nómbrela como categorías . Ahora abra el archivo router.js para definir las asignaciones de 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;
Abra el archivo application.hbs creado en app / templates / con el siguiente código:
{{#link-to 'record_demo'}}Go to Records demo page{{/link-to}}
{{outlet}}
Al hacer clic en el enlace anterior, se abrirá la página de plantilla record_demo, que se crea en app / templates / . El archivo record_demo.hbs contiene el siguiente código:
<h2>Welcome...Click the below link for Categories page</h2>
{{#link-to 'record_demo.categories'}}Go to Categories page{{/link-to}}
{{outlet}}
La página de la plantilla anterior abre el archivo Categories.hbs, que se crea en app / templates / record_demo y contiene el siguiente código:
<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}}
Ahora abra el archivo Categories.js creado en app / routes / record_demo con el siguiente código:
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);
}
}
});
Salida
Ejecute el servidor Ember; recibirá el siguiente resultado:
![](https://assets.edu.lat/emberjs/images/emberjs-crt-del-rec.jpg)
Al hacer clic en el enlace, se abrirá la página records_demo con el enlace de la página de categorías -
![](https://assets.edu.lat/emberjs/images/emberjs-crt-del-rec1.jpg)
A continuación, se abrirá la página de la plantilla de categorías. Ingrese la identificación y el nombre en el cuadro de entrada y haga clic en el botón Agregar a la lista como se muestra en la captura de pantalla a continuación:
![](https://assets.edu.lat/emberjs/images/emberjs-crt-del-rec2.jpg)
A continuación, haga clic en el botón Agregar; verá los registros agregados en la lista y el número de recuento se incrementará -
![](https://assets.edu.lat/emberjs/images/emberjs-crt-del-rec3.jpg)
Si desea eliminar los registros de la lista, haga clic en el botón Eliminar .