Create an Ember Project with the Ember-CLI

Ember Templating with HTMLBars

Add user interaction to Ember.js apps using actions

Define Routes in Ember 2.0 using Ember-CLI

Creating nested routes in Ember.js

Define Models for Routes in Ember

Create Simple Components in Ember

Use Closure Actions with Ember Components

Debug Ember Applications using Ember Inspector

Ember 2 Fundamentals

In this lesson, we show how to specify a model for an Ember Route so its data can be displayed. 

[00:00] Let's get started by generating a todos route. Now, if we go to our router.js file, you can see we have our route todos here. Now, let's go to our todos.hbs file, and say, "h1, list of todos." Then if we go to our Ember application in the browser, and go to /todos, we'll now see a list of todos. Great.

[00:40] Now, let's go to our routes/todos.js. Here, we can define our model function for this route. For what we're going to return, we're just going to return a hard-coded array of objects. Let's have it say something like, "ID1, description, record videos."

[01:01] Then let's do, on line nine, we can say, "ID2 description, finish taxes." Now, we can save. Now, we can go back to our template, and we can make a loop with each model as to-do. We can then say, "todo.description." Let's make that a paragraph. Then save.

[01:53] You will see each of our todos from our model route here. Now, models don't necessarily have to be an array. Let's generate a route called ember generate route todos/show. Now, if we go back to our router.js file, you'll see we have this show route here.

[02:23] Let's say its path is going to be equivalent to /id, and save. Now next, we're going to back to our template/todos.hbs. Let's make this into a link. We can use this by using the built-in link-to helper that Ember provides us.

[02:49] We'll say that we're looking at todos.showtodo, and have that. Then have a closing link-to here, and save. Now, if you hover over it, we know that each our todos have an ID. Now, we if we go here, and we hover over it, we can see that goes to todo/1.

[03:17] Let's click it, and our URL changes to todo/1, but our UI doesn't change. In order to get these changes to show up in our browser, let's go to todos/o.hbs. We can just add a header to say, "In a detail view for todo." Next, we can go to our todos/show.js file, and let's go to the model hook here.

[03:50] The first input to it's going to be a variable called params. Next, rather than returning an array, let's do some logic here. Let's say if params.id == 1, let's just return 8, ID 1, description, record videos. Then else if params.id == 2, we're going to return the other parameter from that list. Description, finish taxes. Then we'll be able to then save.

[04:52] Now, what we can then do is go to our todos/show.hbs, and here, we can have a paragraph that says, "todo currently is." Then we can press model.description, and then save. Boom, we have our description down here. For sake of demonstration, we can then go to finish taxes, and we see the description update dynamically.

Course

Ember 2 Fundamentals

Define Models for Routes in Ember

Share this video with your friends