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://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<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="well well-lg">  
    <h1>Application</h1>
    <h4>{{#linkTo "posts"}} View Posts {{/linkTo}}</h3>
   
    <div class="well well-sm">
      <span class="label label-info">OUTLET DEFINED IN APPLICATION TEMPLATE</span>
      {{outlet}}
    </div>
  </div>
  </script>
​
  <script type="text/x-handlebars" data-template-name="_variables">
    <div class="well well-sm alert alert-info">
      Foo: <span class="label label-danger">{{ foo }}</span>
      <br />
      Bar: <span class="label label-info">{{ bar }}</span>
      <br />
    </div>
  </script>
  
  <script type="text/x-handlebars" data-template-name="posts">
    <span class="label label-default">BEGIN POSTS TEMPLATE</span>
    
        <div class="well well-sm alert alert-info">
         {{ partial "variables" }}         
         <span class="label label-info">POST NESTED</span>
         <ul>
          {{#each}}
            <li> {{#linkTo "posts.post" id }} Post {{ id }}  {{title}} by {{author}} {{/linkTo}}  </li>
          {{/each}}
         </ul> 
  
         <span class="label label-info">ALTPOST NOT NESTED</span>
         <ul>
          {{#each}}
            <li> {{#linkTo "altpost" id }} Altpost {{ id }}  {{title}} by {{author}} {{/linkTo}} </li>
          {{/each}}
         </ul> 
​
         <div class="well well-sm">
         <span class="label label-info">OUTLET DEFINED IN POSTS TEMPLATE</span>
         {{outlet}}
         </div>
      </div>    
      
    <span class="label label-default">END POSTS TEMPLATE</span>
  </script>  
​
​
​
  <script type="text/x-handlebars" data-template-name="posts/post">
    <span class="label label-default">BEGIN NESTED POST TEMPLATE</span>
    
      <div class="well well-sm alert alert-success">
         {{ partial "variables" }}       
         <h2>{{ title }}</h2>
         Author: {{ author }}
         <br />
         {{ body }}
      </div>  
      
    <span class="label label-default">END NESTED POST TEMPLATE</span>
  </script>    
​
  <script type="text/x-handlebars" data-template-name="altpost">
    <span class="label label-default">BEGIN NON NESTED ALTPOST TEMPLATE</span>
    
      <div class="well well-sm alert alert-info">
         {{ partial "variables" }}       
          <h2>{{ title }}</h2>
          Author: {{ author }}
          <br />
          {{ body }}
      </div>  
      
    <span class="label label-default">END NON NESTED ALTPOST TEMPLATE</span>
  </script>    
​
</body>
</html>
Output

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

Dismiss x
public
Bin info
GordonPotterpro
0viewers