apiKey

authDomain

databaseURL

projectId

storageBucket

messagingSenderId

appId

Gain insights into Ember.js, explore templates, components, routing, and testing. Delve into building a complete e-commerce app and integrate with Firebase to leverage Ember's features robustly.

tarball.tar.gz

FirstApp

templateIntro

stylingtemplate

addingbootstrap

completehomepage

Challenge

Settinguproutes

Modifyingroutes

notfoundroute

nestedroutes

dynamicroutes

categoryroute

addroute

components

controller

Firebase

helpers

services

tests

Ember.js is a JavaScript framework for building scalable web applications with discrete components.

In this course, practicing JavaScript developers will be introduced to the Ember.js framework. You’ll start by setting up Ember and creating a project application. You’ll continue with the building blocks of Ember.js, including templates, components, routing, services, helpers, Ember Data, and testing. You’ll then use the components to build a complete e-commerce application from scratch. Each lesson will add more depth and functionality to your application with hands-on exercises. Finally, you’ll integrate the application with Firebase.

By the end of the course, you’ll be prepared to leverage Ember’s key features to develop robust web applications.

Developing Robust Web Applications with Ember.js

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:


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 do this to find the product we want to edit from our database.
- **Lines 28–38:** We search the clicked product using the `findRecord()` method of our data. This is based on the product model and `id`. In the `then` promise, we edit the values and save them on Firebase.

  - **Lines 29–33:** We set the updated values to the searched `product`.

  - **Line 35:** We update the data on Firebase using the `save()` method.

  - **Line 37:** We transit the `edit` route back to the `admin` route.


# Deleting the product
- **Lines 42–46:** We search the product based on the product `id` and delete it using the `deleteRecord()` method of the Ember Data store.

  - **Line 42:** We receive the `id` of the clicked product.

  - **Line 43:** We use the `findRecord()` method to search our product based on the `id`. The `findRecord()` method returns a promise.

  - **Line 44:** We delete the returned product in the `then()` promise. 
  - **Line 45:** We use the `save()` method to apply these changes to Firebase.

 - **Line 48:** We display an `alert` to show that the product is deleted.

 - **Line 49:** We transit the `edit` route back to the `admin` route.

Run the application below to test the `edit` route:



Learn to edit and delete products from the Firebase Realtime Database.


Retrieving Products from Firebase 

Learn to edit and delete products from the Firebase Realtime Database.

Editing and Deleting Products in Firebase

Course Overview

Getting Started with Ember

Templates in Ember

Routing in Ember

Nested Routing

Components in Ember

Controllers in Ember

Ember Data

Integration with Firebase

Helpers

Services in Ember

Testing in Ember

Conclusion

Ember.js Assessment

Editing and Deleting Products in Firebase