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>Ember.js • TodoMVC</title>
  
</head>
<body>
  <script type="text/x-handlebars" data-template-name="todos">
​
  <section id="todoapp">
    <header id="header">
      <h1>todos</h1>
      <input type="text" id="new-todo" placeholder="What needs to be done?" />
    </header>
​
      <section id="main">
        <ul id="todo-list">
          {{#each todo in model}}
            <li {{bind-attr class="todo.isCompleted:completed"}}>
              <input type="checkbox" class="toggle">
              <label>{{todo.title}}</label><button class="destroy"></button>
            </li>
          {{/each}}
        </ul>
​
        <input type="checkbox" id="toggle-all">
      </section>
​
      <footer id="footer">
        <span id="todo-count">
          <strong>2</strong> todos left</span>
        <ul id="filters">
          <li>
            <a href="all" class="selected">All</a>
          </li>
          <li>
            <a href="active">Active</a>
          </li>
          <li>
            <a href="completed">Completed</a>
          </li>
        </ul>
​
        <button id="clear-completed">
          Clear completed (1)
        </button>
      </footer>
  </section>
​
  <footer id="info">
    <p>Double-click to edit a todo</p>
  </footer>
  
  </script>
​
  <script src="http://emberjs.com.s3.amazonaws.com/getting-started/jquery.min.js"></script>
  <script src="http://emberjs.com.s3.amazonaws.com/getting-started/handlebars.js"></script>
  <script src="http://emberjs.com.s3.amazonaws.com/getting-started/ember.js"></script>
  <script src="http://emberjs.com.s3.amazonaws.com/getting-started/ember-data.js"></script>
</body>
</html>
​
 
window.Todos = Ember.Application.create();
​
Todos.ApplicationAdapter = DS.FixtureAdapter.extend();
​
Todos.Router.map(function () {
  this.resource('todos', { path: '/' });
});
​
Todos.TodosRoute = Ember.Route.extend({
  model: function () {
    return this.store.find('todo');
  }
});
​
Todos.Todo = DS.Model.extend({
  title: DS.attr('string'),
  isCompleted: DS.attr('boolean')
});
​
Todos.Todo.FIXTURES = [
  {
    id: 1,
    title: 'Learn Ember.js',
    isCompleted: true
  },
  {
    id: 2,
    title: '...',
    isCompleted: false
  },
  {
    id: 3,
    title: 'Profit!',
    isCompleted: false
  }
];
​
Output 300px

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

Dismiss x
public
Bin info
teddyzeennypro
0viewers