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 />
 
​
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.3/ember.js"></script>
<script src="https://raw.github.com/dgeb/ember_data_example/master/vendor/assets/ember/development/ember-data.js"></script>
 
​
​
<title>JS Bin</title>
</head>
<body>
  
 <script type="text/x-handlebars" data-template-name="application">
    
<h1>Application template was rendered</h1>
<li> {{#linkTo "index"}} Home {{/linkTo}} </li>        
<li> {{#linkTo 'posts'}} Post {{/linkTo}} </li>  
    
    <br/>
<p>Injected content via application outlet is everything below.</p>
<div> {{outlet}}</div>
 </script>
    
<script type="text/x-handlebars" data-template-name="index">
    <h1> Welcome Mate! this came from index template</h1> 
</script>
​
<script type="text/x-handlebars" data-template-name="posts">
<h6>
from the posts template and content injected 'posts.index' via the outlet in posts.hbs!
</h6>
{{outlet}}
</script>
​
<script type="text/x-handlebars" data-template-name="posts/index">
 <h5>i am from 'posts/index.hbs'.</h5>
    <br/> 
{{#each post in content}}
    <p>{{#linkTo 'posts.show' post}} {{post.title}}  {{/linkTo}}</p>
{{/each}}
<p>{{#linkTo 'posts.new'}} Create a new post {{/linkTo}}</p> 
</script>
​
<script type="text/x-handlebars" data-template-name="posts/show">
  <h1>Post</h1>
<p>Your content here.</p>
<h3> {{title}} </h3>
<h3> {{body}} </h3>
    <br/>
<p> {{#linkTo 'posts.index'}} back {{/linkTo}}</p>
<p> {{#linkTo 'posts.edit' content}} Edit the post  {{/linkTo}}</p> 
    
 <br/>
    <p> Comments</p>
     //displays the add button link
     {{render 'comment.New' }} 
    <br/>
   
    <br/>
    {{render 'comments' comments}}
    
​
</script>
​
<script type="text/x-handlebars" data-template-name="posts/_form">
  <h1>form</h1>
<form  {{action save content on="submit"}} >
{{view Ember.TextField valueBinding="title" placeholder="title" }}
​
{{view Ember.TextArea valueBinding="body" placeholder="body"}}
<button type="submit"> ok </button>
​
<button {{action cancel content}}> Cancel</button>
</form>  
</script>
​
<script type='text/x-handlebars' data-template-name='posts/new'>
   {{partial 'posts/form'}} 
</script>
​
<script type='text/x-handlebars' data-template-name='posts/edit'>
   {{partial 'posts/form'}} 
   <a href='#' {{action destroyPost this}}> Destroy </a>
</script>
​
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers