Open In App

Ember.js Models

Improve
Improve
Like Article
Like
Save
Share
Report

Ember.js is a web development framework aimed at professional web development projects. It creates applications in MVC architecture by default which increases the efficiency of work done on maintaining the structure of the application. Ember.js is a productive framework that makes the development and prototyping of applications easier and faster. 

Ember.js Models: A model is a class containing the properties and features of the object. It is very much similar to classes used in programming languages like Java, C, C++, etc. For example, we want to create a model of a shop which contains the details of the shop like what it sells, per day revenue, name of the shop and many other details. Then we will need to create the functions to set and get the values from the model.

Let us create an Ember.js project in which we will create our model called shop. We will have a list of shops with the same details

 

Create a project: 

Step 1: To create a new project, enter the following command on your Terminal / Command Prompt.

ember new models_tutorial

The project structure is as follows.

Step 2: After the project is created, run the project using the following command.

ember serve

After a successful build, navigate to the URL http://localhost:4200/ on your browser and you should see the following output.

Step 3: We need some data to be passed to the application page. So here is the data prepared for you. It has some names and categories of shops. Create a new file inside the app\routes folder and name it application.js. It will serve us data.

app\routes\application.js

Javascript




import Route from '@ember/routing/route';
  
export default class ApplicationRoute extends Route {
  async model() {
      return {
          title:"dasds",
          shops:[
              {
                  name:"Grand Sweet Shop",
                  category:"Sweet"
              },
              {
                  name:"Wonderful garments",
                  category:"Clothes"
              },
              {
                  name:"Vidya Bhandar",
                  category:"Books",
              }
                
          ]
        };
    }
}


Step 4: Now we are going to display the model data on our application page. Now to display the data on our application, we know the data is a list of similar items. So we will use the each-helper from Ember.js as it allows us to loop through the list of items. There will be a div container for each of the shop’s details.  We will then finally modify the CSS of our application. 

app\templates\application.hbs and app\styles\app.css

HTML




{{page-title "ModelsTutorial"}}
  
<h1>
    Welcome to GeeksforGeeks
</h1>
{{#each @model.shops as |shop|}}
    <div id="shop">
        <h3>{{shop.name}}</h3>
        <h5>{{shop.category}}</h5>
    </div>
      
{{/each}}
{{outlet}}


CSS




h1{
    text-align: center;
}
#shop{
    margin:4rem;
    padding:.5rem;
    background-color: #63ff95;
    border-radius: 10px;
    transition-duration:0.5s;
}
#shop:hover{
    transform: scale(1.1,1.1);
}


Output: Save the code and here is the result.



Last Updated : 04 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads