Search⌘ K
AI Features
Home
Courses
Developing Robust Web Applications with Ember.js

Editing and Deleting Products in Firebase

Explore how to edit and delete products within an Ember.js application by integrating Firebase. Learn to find, update, and delete product records using Ember Data's findRecord, save, and deleteRecord methods, then manage route transitions to maintain smooth user interactions.

We'll cover the following...

The admin/edit route is responsible for editing and deleting the products. We’ve already defined the editProduct() and deleteProduct actions in the edit controller.

Let’s open app/controllers/admin/edit.js and add the required code:

JavaScript (JSX)
import Controller from '@ember/controller';
import { action } from '@ember/object';
export default class AdminEditController extends Controller {
  @action
  editProduct() {
    const id = this.model.id;
    let title = this.get('model.product_title');
    let desc = this.get('model.desc');
    let price = this.get('model.price');
    let e = document.getElementById('category');
    let category = e.options[e.selectedIndex].value;
    let imglink = this.get('model.imglink');
    // let changed_values = {
    //   title: title,
    //   desc: desc,
    //   price: price,
    //   category: category,
    //   imglink: imglink,
    // };
    // console.log(changed_values);
    this.store.findRecord('product', id).then(function (product) {
      product.set('title', title);
      product.set('desc', desc);
      product.set('category_id', category);
      product.set('price', price);
      product.set('imglink', imglink);
      product.save();
    });
    this.transitionToRoute('admin');
  }
  @action
  deleteProduct() {
    const id = this.model.id;
    this.store.findRecord('product', id).then(function (product) {
      product.deleteRecord();
      product.save();
    });
    alert("Product Deleted");
    this.transitionToRoute('admin');
  }
}

Editing the product

  • Line 7: We receive the clicked product id from our model. We ...