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 name="description" content="2.3 TodoMVC 500 items">
<meta name="" content="" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
 
<script type='text/stache' id='todos-app-template'>
<todos-app>
    <section id="todoapp">
        <header id="header">
            <h1>todos</h1>
            <todos-create></todos-create>
        </header>
        
        <section id="main" class="">
            <input id="toggle-all" type="checkbox" 
                  ($change)="todos.setCompletedTo(%element.checked)">
            <label for="toggle-all">Mark all as complete</label>
            <todos-list {todos}='displayedTodos()'></todos-list>
        </section>
        <footer id="footer" class="">
            <span id="todo-count">
                <strong>{{todos.remainingCount}}</strong> {{plural( "item",todos.remainingCount) }} left
            </span>
            <ul id="filters">
            
                <li><a href="{{routeUrl}}"
                      {{#routeCurrent()}}class='selected'{{/routeCurrent}}>
                      All</a></li>
                <li><a href="{{routeUrl(filter='active')}}"
                      {{#routeCurrent(filter='active')}}class='selected'{{/routeCurrent}}>
                      Active</a></li>   
                <li><a href="{{routeUrl(filter='completed')}}"
                      {{#routeCurrent(filter='active')}}class='selected'{{/routeCurrent}}>
                      Completed</a></li>   
            </ul>
            <button id="clear-completed" 
                    class="{{^todos.completedCount}}hidden{{/todos.completedCount}}"
                    ($click)="todos.destroyCompleted()">
                Clear completed ({{todos.completedCount}})
            </button>
        </footer>
    </section>
</todos-app>
</script>
<script type='text/stache' id='todos-list-template'>
<ul id="todo-list">
    {{#each todos}}
        <li class="todo {{#completed}}completed{{/completed}} {{#editing}}editing{{/editing}}" 
            ($dblclick)='edit'>
            <div class="view">
                <input 
                    class="toggle" 
                    type="checkbox"
                    {($checked)}='completed'/>
                <label>{{name}}</label>
                <button class="destroy"
                        ($click)="destroy()"></button>
            </div>
            <input class="edit" 
                   type="text" 
                   value="{{name}}" 
                   ($blur)='updateTodo(., %element.value)'
                   ($enter)='updateTodo(., %element.value)'>
        </li>
    {{/each}}
</ul>
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//canjs.com/release/2.3.8/can.jquery.js"></script>
<script src="//canjs.com/release/2.3.8/can.stache.js"></script>
<script src="//canjs.com/release/2.3.8/can.map.define.js"></script>
<script src="//canjs.com/release/2.3.8/can.fixture.js"></script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
justinbmeyerpro
0viewers