Every so often a reported cryptid sighting turns out to be a hoax. While this may be rare, you do need a way to delete old or debunked data. Recall from Chapter 21 that destroying records is achieved by calling record.destroyRecord. Simple enough.
Make it so: Add a delete button to your template in app/templates/sighting/edit.hbs.
<button type="submit" class="btn btn-info btn-block">Update</button> <button {{action 'cancel'}} class="btn btn-block">Cancel</button> </form> <hr> <button {{action 'delete'}} class="btn btn-block btn-danger"> Delete </button>
In addition to the new button, you added a horizontal rule (a simple line) between the
form elements to separate the Update and Cancel buttons from the new
Delete button. The <hr>
is a UI tool you are using to
indicate that deleting a sighting is a separate process from editing a sighting.
Next, add the delete
action to your
controller, app/controllers/sighting/edit.js:
... cancel() { if(this.get('sighting').get('hasDirtyAttributes')){ this.get('sighting').rollbackAttributes(); } this.transitionToRoute('sightings'); }, delete() { var self = this; if (window.confirm("Are you sure you want to delete this sighting?")) { this.get('sighting').destroyRecord().then(() => { self.transitionToRoute('sightings'); }); } } } });
The
delete
action adds a
window.confirm
to get the user’s confirmation.
Aside from the conditional, this action is like the
others: get the model, call a method, and add an async
then
to call when the API request is done.
Now navigate to http://localhost:4200/sightings and click the Edit button for one of your sightings to view the app/templates/sightings/edit.hbs and its new Delete button (Figure 24.5).
The cycle is now complete: creation to destruction.
3.14.251.128