eccegordo/jsbin.ocimid.html

## jsbin.ocimid.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="An example of working through the ember nest routes" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src=" http://builds.emberjs.com.s3.amazonaws.com/ember-data-0.13.js"></script>
 <title>Ember JS</title>
</head>
<body>

  <script type="text/x-handlebars">
    <h1>Ember Nested Routes Example</h1>
    <p>
        <a href="http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources">Emulating idiomatic code in guide for Nested Routes</a>

    </p>
    {{#linkTo "posts"}} View Posts {{/linkTo}}
    {{outlet}}
  </script>


  <script type="text/x-handlebars" data-template-name="post">
    {{ outlet }}
  </script>

  <script type="text/x-handlebars" data-template-name="posts/index">
    <table class="table table-striped table-hover">
        <thead>
        <tr>
            <th></th>
            <th><h4>Post Title:</h4></th>
        </tr>
        </thead>


        <tbody>
        {{#each model}}
        <tr>
            <td>{{#linkTo "post" this}} Show Post {{/linkTo}}</h4></td>
            <td>{{title}}</td>
        </tr>
        {{/each}}

        </tbody>
    </table>

  </script>

  <script type="text/x-handlebars" data-template-name="post/index">
  <h2>Post Index Page</h2>
  {{#linkTo "post.edit" this}} Edit {{/linkTo}}
  <hr />
  {{title}}
  <hr />
  {{body}}
  <hr />

  <h2> Comments: </h2>

  <ul>
  {{#each comment in controller}}
    <li> {{comment.content}} </li>
  {{/each}}
  </ul>
  </script>


  <script type="text/x-handlebars" data-template-name="post/edit">
  <h2>Post Edit Page</h2>

  </script>


</body>
</html>

## jsbin.ocimid.js
App = Ember.Application.create({});


App.Router.map(function() {
  this.resource('posts', { path: '/posts' }, function() {

  });

  this.resource('post', { path: '/post/:post_id' }, function() {
    this.route('edit');
    this.resource('comments', function() {
      this.route('new');
    });
  });
});


App.PostsIndexRoute = Em.Route.extend({
    model: function() {
        return App.Post.find();
    }
});


// Models
App.Post = DS.Model.extend({
    title: DS.attr('string'),
    body: DS.attr('string'),
    comments: DS.hasMany('App.Comment')
});

App.Comment = DS.Model.extend({
    content: DS.attr('string')
});

// Data store
App.Store = DS.Store.extend({
  revision: 13,
  adapter: DS.FixtureAdapter.create()
});

// Fixtures
App.Post.FIXTURES = [{
        id: 1,
        title: "ABC post title",
        body: "ABC post body",
        comments: [11, 12]
    },
    {
        id: 2,
        title: "DEF post title",
        body: "DEF post body",
        comments: [13]
    }
];

App.Comment.FIXTURES = [
  {
        id: 11,
        content: "Comment on ABC post"
  },
  {
        id: 12,
        content: "Second Comment on ABC post"
  },
  {
        id: 13,
        content: "A Comment on DEF post"
  }

];
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="An example of working through the ember nest routes" />
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
	<script src="http://builds.emberjs.com/ember-latest.js"></script>
	<script src=" http://builds.emberjs.com.s3.amazonaws.com/ember-data-0.13.js"></script>
	<title>Ember JS</title>
	</head>
	<body>

	<script type="text/x-handlebars">
	<h1>Ember Nested Routes Example</h1>
	<p>
	<a href="http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources">Emulating idiomatic code in guide for Nested Routes</a>

	</p>
	{{#linkTo "posts"}} View Posts {{/linkTo}}
	{{outlet}}
	</script>


	<script type="text/x-handlebars" data-template-name="post">
	{{ outlet }}
	</script>

	<script type="text/x-handlebars" data-template-name="posts/index">
	<table class="table table-striped table-hover">
	<thead>
	<tr>
	<th></th>
	<th><h4>Post Title:</h4></th>
	</tr>
	</thead>


	<tbody>
	{{#each model}}
	<tr>
	<td>{{#linkTo "post" this}} Show Post {{/linkTo}}</h4></td>
	<td>{{title}}</td>
	</tr>
	{{/each}}

	</tbody>
	</table>

	</script>

	<script type="text/x-handlebars" data-template-name="post/index">
	<h2>Post Index Page</h2>
	{{#linkTo "post.edit" this}} Edit {{/linkTo}}
	<hr />
	{{title}}
	<hr />
	{{body}}
	<hr />

	<h2> Comments: </h2>

	<ul>
	{{#each comment in controller}}
	<li> {{comment.content}} </li>
	{{/each}}
	</ul>
	</script>



	<script type="text/x-handlebars" data-template-name="post/edit">
	<h2>Post Edit Page</h2>

	</script>


	</body>
	</html>
	App = Ember.Application.create({});


	App.Router.map(function() {
	this.resource('posts', { path: '/posts' }, function() {

	});

	this.resource('post', { path: '/post/:post_id' }, function() {
	this.route('edit');
	this.resource('comments', function() {
	this.route('new');
	});
	});
	});


	App.PostsIndexRoute = Em.Route.extend({
	model: function() {
	return App.Post.find();
	}
	});


	// Models
	App.Post = DS.Model.extend({
	title: DS.attr('string'),
	body: DS.attr('string'),
	comments: DS.hasMany('App.Comment')
	});

	App.Comment = DS.Model.extend({
	content: DS.attr('string')
	});

	// Data store
	App.Store = DS.Store.extend({
	revision: 13,
	adapter: DS.FixtureAdapter.create()
	});

	// Fixtures
	App.Post.FIXTURES = [{
	id: 1,
	title: "ABC post title",
	body: "ABC post body",
	comments: [11, 12]
	},
	{
	id: 2,
	title: "DEF post title",
	body: "DEF post body",
	comments: [13]
	}
	];

	App.Comment.FIXTURES = [
	{
	id: 11,
	content: "Comment on ABC post"
	},
	{
	id: 12,
	content: "Second Comment on ABC post"
	},
	{
	id: 13,
	content: "A Comment on DEF post"
	}

	];