EMBER WORKSHOP: Ember.js Router: Route vs Resource

Ember.js Router: Route vs Resource

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<h3>Ember.js Router: route vs. resource</h3>

<script type="text/x-handlebars">
<h1>Application</h1>
<ul>
  <li>{{#link-to "about"}}About{{/link-to}}</li>
  <li>{{#link-to "login"}}Login{{/link-to}}</li>
</ul>
{{outlet}}
</script>

<script type="text/x-handlebars" id="about">
<h2>About</h2>
<ul>
  <li>
    {{#link-to "about.location"}}Location{{/link-to}}
  </li>
  <li>
    {{#link-to "about.product"}}Product{{/link-to}}
  </li>
</ul>
{{outlet}}
</script>
  
<script type="text/x-handlebars" id="index">
<h2>Index</h2>
</script>

<script type="text/x-handlebars" id="login">
<h2>Login</h2>
</script>

<script type="text/x-handlebars" id="about/index">
<h3>Index</h3>
</script>
  
<script type="text/x-handlebars" id="about/location">
<h3>Location</h3>
</script>

<script type="text/x-handlebars" id="about/product">
<h3>Product</h3>
</script>

JavaScript

var App = Ember.Application.create({
    //LOG_TRANSITIONS: true,
    //LOG_RESOLVER: true,
    //LOG_ACTIVE_GENERATION: true, // log whats being actively generated
    //LOG_MODULE_RESOLVER: true, 
    //LOG_TRANSITIONS: true,
    //LOG_TRANSITIONS_INTERNAL: true,
    //LOG_VIEW_LOOKUPS: true 
});

App.Router.map(function() {
  this.resource('about', function() {
    this.route('product');
    this.route('location');
  });
  this.resource('login');
});