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://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/ember-data.js/0.13.0/ember-data-latest.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
     <script type="text/x-handlebars" data-template-name="todos">
      <section id="todoapp">
        <header id="header">
          <h1>todos</h1>
          {{view Ember.TextField id="new-todo" placeholder="What needs to be done?"
                 valueBinding="newTitle" action="createTodo"}}
        </header>
​
          <section id="main">
            <ul id="todo-list">
              {{#each controller}}
                <li {{bindAttr class="isCompleted:completed isEditing:editing"}}>
                  {{#if isEditing}}
                    <input class="edit" />
                  {{else}}
                    {{view Ember.Checkbox class="toggle"
                           checkedBinding="isCompleted"}}
                    <label {{action "editTodo" on="doubleClick"}}>
                      {{title}}
                    </label>
                    <button class="destroy"></button>
                  {{/if}}
                </li>
              {{/each}}
            </ul>
​
            <input type="checkbox" id="toggle-all">
          </section>
​
          <footer id="footer">
            <span id="todo-count">
              <strong>{{remaining}}</strong> {{inflection}} 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>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers