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'>
There are {{productsCount}} products
<img {{bind-attr src='logo'}} alt='Logo' />
Current Time: {{time}}
</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'>
## Products
{{model}}
</script>
Rendering the Model
<script type='text/x-handlebars' data-template-name='products'>
## Products
{{model}}
</script>
Output:
## Products
[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'>
## Products
{{#each product in model}}
## {{product.title}}
{{/each}}
</script>
Output:
<h1>Products</h1>
## Flint
## Kindling
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}}
## {{title}}
{{/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'>
## {{title}}
<p class='product-description'>{{description}}
<button class='btn btn-success'>Buy for ${{price}}</button>
</div>
{{/each}}
</script>
Output a few more properties and add some styling.