Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head> 
<meta charset=utf-8 />
<title>Blah</title>
</head>
<body> 
  
  <script type="text/x-handlebars" data-template-name="application">
  {{outlet}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="posts/index">
  <div class="posts">
  <h2>Welcome to your blog posts</h2>
  <p>Here are your posts:</p>
  <ul>
    <li>{{#link-to 'posts.featured'}}Featured{{/link-to}}</li>
    <li>{{#link-to 'posts.authors'}}Authors{{/link-to}}</li>
    <li>{{#link-to 'posts.popular'}}Popular{{/link-to}}</li>
  </ul>
  <div class="posts-container">
    {{outlet}}
  </div>
</div>
  </script>
  
  <script type="text/x-handlebars" data-template-name="posts/featured">
  <div class="featured-posts">
  <h3>List of featured posts</h3>
  <h1>BLAH</h1>
</div>
  </script>
  
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://builds.emberjs.com/release/ember-template-compiler.js"></script>
  <script src="http://builds.emberjs.com/release/ember.debug.js"></script>
  <script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</body>
</html>
 
var App = Em.Application.create();
​
App.Router.map(function() {
  this.route('posts', function() {
    this.route('featured');
    this.route('authors');
    this.route('popular');
  });
});
​
App.IndexRoute = Em.Route.extend({
  redirect: function() {
    this.transitionTo('posts.index');
  }
});
​
App.PostsIndexRoute = Em.Route.extend({
  renderTemplate: function() {
    
    this.render();
    
    this.render('posts/featured', {
      into: 'posts/index'
    });
    
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers