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>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<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">
    <div class="container">
      <h1>Ember Nested Routes Example</h1>
      {{#linkTo 'posts'}}Show all posts{{/linkTo}}
      <br>
      {{outlet}}  
    </div>
  </script>
​
​
  <script type="text/x-handlebars" data-template-name="posts">
    <h2>Collection of Posts</h2>
    <table class="table table-striped table-hover">
        <thead>
        <tr>
            <th></th>
        </tr>
        </thead>
    
        <tbody>
        {{#each controller}}
        <tr>
            <td>{{#linkTo "post" this}} {{title}} {{/linkTo}}</h4></td>
        </tr>
        {{/each}}
    
        </tbody>
    </table>
  </script>  
​
  
  <script type="text/x-handlebars" data-template-name="post">
    <h2>{{title}}</h2>  
    {{body}}
    
    <br><br>
    
    {{#linkTo "post.edit" this}} Edit post {{/linkTo}}
    <hr />
    {{outlet}}
  </script>
  
  
  <script type="text/x-handlebars" data-template-name="post/index">
    {{partial "comments"}}
  </script> 
​
​
  <script type="text/x-handlebars" data-template-name="post/edit">
    <h2>Post Edit Page</h2>
    {{view Ember.TextField valueBinding="title"}} <br>
    {{view Ember.TextArea valueBinding="body"}} <br>
    
    <button {{action save}}>Save</button>
  </script> 
  
  
  <script type="text/x-handlebars" data-template-name="comments">
    <h2> Comments: </h2>
​
    <ul>
      {{#each comments}}
        <li> {{content}} {{#linkTo "comment.edit" this}} Edit {{/linkTo}} </li>
      {{/each}}   
    </ul>
    
    {{#linkTo "comments.new"}}New comment{{/linkTo}} <hr />
    
    {{outlet}}
  </script>
  
  
  <script type="text/x-handlebars" data-template-name="comments/new">
    <h2>Add new comment</h2>
    
    {{view Ember.TextArea valueBinding="model.content"}} <br>
 
    <button {{action save}}> Add </button>
  </script>
  
  <script type="text/x-handlebars" data-template-name="comment/edit">
    <h2>Edit comment</h2>
    
    {{view Ember.TextArea valueBinding="model.content"}} <br>
    <button {{action save}}> Save </button>
  </script>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers