Ember – Resource Routes

The difference between resource() and route() in Ember.js is that you should use this.resource for URLs that represent a noun, and this.route for URLs that represent adjectives or verbs modifying those nouns.

The practical difference between these two is that resource may contain other routes, whereas route cannot. Additionally, this.resource automatically creates an index route when it sees you have sub-routes.

Here, the name of the controller matches the route and template names.

app.js

App.IndexController = Ember.Controller.extend({
	productsCount: 6,
	logo: '/images/test.png',
	time: function() {
	return (new Date()).toDateString();
	}.property()
});

index.html

<script type='text/handlebars' data-template-name='index'>
	<p>There are {{productsCount}} products</p>
	<img {{bind-attr src='logo'}} alt='Logo' />
	<p>Current Time: {{time}}</p>
</script>

Templates can use properties from a controller

Use route for adjectives, verbs, adverbs

app.js

App.Router.map(function() {
	this.route('about');
});

Adjective Routes

this.route('onsale');
this.route('expiring');
this.route('new');
this.route('internal');

Verb Routes

this.route('signup');
this.route('ignite');
this.route('help');
this.route('rate');

Use ‘Resource’ Routes for Nouns

app.js

App.Router.map(function() {
	this.route('about');
});
this

Noun Resources

this.resource('tree');
this.resource('review');
this.resource('books');
this.resource('contacts');

There can be singular or plural. The resource keyword has some additional functionality.

Resource Route Options

app.js

App.Router.map(function() {
	this.route('about');
	this.resource('products' , { path: '/items' });
});

Resource Views

app.js

App.Router.map(function() {
	this.route('about');
});
this.

index.html

<script type='text/x-handlebars' data-template-name='products'>
	<h1>Products</h1>
</script>

Here the data-template-name matches the route name.

Linking to Resources

We can link to this route with its name like any other.

index.html

<script type='text/x-handlebars' data-template-name='application'>
	...
	{{#link-to 'products' tagName='li'}}Products{{/link-to}}
	...
</script>

Ember Route

Ember Route fetches data and passes it to the Ember Controller. It decides on what model to use for the current route.
And it decides which template to render to the screen.

A model could be a JavaScript Object or an Array of objects.

Ember Router – Translates a path into a route.

Ember Route – Provides data for the controller.

Don’t get these confused!

Router? Route? Controller?

  • Router Used to define routes our application accepts

    			this.resource('products');
    		
  • Responsible for getting data from external resources

    			App.ProductsRoute = Ember.Route.extend({ });
    		

    Created by Ember if not defined.

  • Decorates the model, provides property values

    			App.ProductsController = Ember.Controller.extend({ });
    		

    Created by Ember if not defined.

A Very Basic Model

app.js

App.PRODUCTS = [
	{
		title: 'Flint',
		price: 99,
		description: 'Flint is…',
		isOnSale: true,
		image: 'flint.png'
	},
	{
		title: 'Kindling',
		price: 249,
		description: 'Easily…',
		isOnSale: false,
		image: 'kindling.png'
	}
];

App.ProductsRoute = Ember.Route.extend({
	model: function() {
	return App.PRODUCTS;
}
});

Above highlighted image could be pulled from an API. and the model property should return an
an object or an array.

Putting it All Together

Router The Route is responsible for fetching the model. Ember will set
this model on the Controller, and that’s what’ll be used in your
Handlebars Template.

Route Model

Controller
index.html

<script type='text/x-handlebars' data-template-name='products'>
	<h2>Products</h2>
	{{model}}
</script>

Rendering the Model

<script type='text/x-handlebars' data-template-name='products'>
	<h2>Products</h2>
	{{model}}
</script>

Output:

<h2>Products</h2>
[object Object],[object Object]

Model is an array, so we’ll need to loop over it!

Looping Over the Array of Objects

index.html

<script type='text/x-handlebars' data-template-name='products'>
	<h2>Products</h2>
	{{#each product in model}}
	<h2>{{product.title}}</h2>
	{{/each}}
</script>

Output:

<h1>Products</h1>
<h2>Flint</h2>
<h2>Kindling</h2>

A Simpler #each Loop

#each without extra options will look for a model property.

index.html

<script type='text/x-handlebars' data-template-name='products'>
	...
	{{#each}}
	<h2>{{title}}</h2>
	{{/each}}
</script>

Within the #each loop, you can access properties on that product

index.html

<script type='text/x-handlebars' data-template-name='products'>
<h1>Products</h1>
<ul class='list-unstyled col-md-8'>
{{#each}}
<li class='row'>
	<img {{bind-attr src='image'}} class='img-thumbnail col-md-5'/>
	<div class='col-md-7'>
	<h2>{{title}}</h2>
	<p class='product-description'>{{description}}</p>
	<p><button class='btn btn-success'>Buy for ${{price}}</button></p>
	</div>
</li>
{{/each}}
</ul>
</script>

Output a few more properties and add some styling.

Be first to comment

Leave a Reply