Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<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>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
  <h1>Todos</h1>
  <ul>
  {{#each}}
    {{todo-item title=title isDone=isDone}}
  {{/each}}
  </ul>
  </script>
  
  <script type="text/x-handlebars" data-template-name="components/todo-item">
    <label>{{input type="checkbox" checked=isDone}} {{title}}</label>
  </script>
</body>
</html>
 
li.is-done {
  background-color: red;
}
 
App = Ember.Application.create();
​
todos = [{
  title: "Learn Ember.js",
  isDone: false
}, {
  title: "Make awesome web apps",
  isDone: true
}];
​
App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return todos; 
  }
});
​
App.TodoItemComponent = Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['isDone']
});
Output

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

Dismiss x