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="TodoMVC Guide 3.0 - Tested">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
<script type='text/stache' id='todo-create-template'>
<input id="new-todo"
    placeholder="What needs to be done?"
    {($value)}="todo.name"
    ($enter)="createTodo()"/>
</script>
​
<script type='text/stache' id='todo-list-template'>
<ul id="todo-list">
  {{#each todos}}
    <li class="todo {{#if ./complete}}completed{{/if}}
      {{#if isDestroying}}destroying{{/if}}
      {{#if isEditing(this)}}editing{{/if}}">
      <div class="view">
        <input class="toggle" type="checkbox"
               {($checked)}="complete" ($change)="save()">
        <label ($dblclick)="edit(this)">{{name}}</label>
        <button class="destroy" ($click)="destroy()"></button>
      </div>
      <input class="edit" type="text"
        {($value)}="name"
        ($enter)="updateName()"
        {$focused}="isEditing(this)"
        ($blur)="cancelEdit()"/>
    </li>
  {{/each}}
</ul>
</script>
​
  
<script type="text/stache" id="todomvc-template">
<section id="todoapp">
    <header id="header">
        <h1>todos</h1>
        <todo-create/>
    </header>
    <section id="main" class="">
        <input id="toggle-all" type="checkbox"
          {($checked)}="allChecked"
          {$disabled}="todosList.saving.length"/>
        <label for="toggle-all">Mark all as complete</label>
        <todo-list {todos}="todosPromise.value"/>
    </section>
    <footer id="footer" class="">
        <span id="todo-count">
            <strong>{{todosPromise.value.active.length}}</strong> items left
        </span>
        <ul id="filters">
            <li>
                <a href="{{routeUrl filter=undefined}}"
                    {{#routeCurrent filter=undefined}}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='complete'}}"
                    {{#routeCurrent filter='complete'}}class='selected'{{/routeCurrent}}>Completed</a>
            </li>
        </ul>
        <button id="clear-completed"
            ($click)="todosList.destroyComplete()">
            Clear completed ({{todosPromise.value.complete.length}})
        </button>
    </footer>
</section>
</script>
​
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://unpkg.com/can/dist/global/can.all.js"></script>
​
<div id="qunit"></div>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.12.0.css">
<script src="https://code.jquery.com/qunit/qunit-1.12.0.js"></script>
  
  </body>
​
</html>
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers