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

Setting up Application Controllers

Explore how to set up and configure Ember.js application controllers to manage product data. Learn to implement actions for adding new products, editing existing ones, and deleting entries using controller methods and template inputs. This lesson equips you with essential controller management skills for building dynamic Ember apps.

We'll cover the following...

Setting up the add route controller

To add a new product to the database, we need to use the controller to get product details from the add route input. First, we use the command below to create the add route:

ember g controller admin/add

This command creates an add.js file in the app/controllers/admin path. Open the add route template to define the action we want to trigger when the user clicks the “Submit” button:

Node.js
{{page-title "Add"}}
<div class="add">
    <form>
        <div class="form-group">
            <label for="exampleFormControlInput1">Title</label>
            {{input type="text" class="form-control" value=title placeholder = "Add Title..."}}
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Description</label>
            {{input type="text" class="form-control" value=desc placeholder = "Add Desc..."}}
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Price</label>
            {{input type="number" class="form-control" min = "1" step="any" value=price placeholder = "Add Price..."}}
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Category</label>
            <select class="form-select" aria-label="Default select example" id="category">
                <option selected value="">Select a category</option>
                <option value="men">Men</option>
                <option value="women">Women</option>
                <option value="kids">Kids</option>
                <option value="homeaccessories">Home Accessories</option>
            </select>
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Image Link</label>
            {{input type="text" class="form-control" value=imglink placeholder = "Add Image Link..."}}
        </div>
        <br>
        </form>
    
        <button class="btn btn-success" type="submit" {{on 'click' this.addProduct}}>Submit</button> 
        <LinkTo class='btn btn-primary' @route="admin" >Close</LinkTo>
    
</div>

In line 37, we define a click event handle named addProduct on the Submit button.

We need to ...