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.
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.
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
Output: Save the code and here is the result.