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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Harmony • TodoMVC using jsrender</title>
  
  <link rel="stylesheet" href="http://code.semanticsworks.com/todomvc/assets/base.css">
  <link rel="stylesheet" href="http://code.semanticsworks.com/todomvc/architecture-examples/harmony/css/app.css">
  
  <!--[if IE]>
    <script src="http://code.semanticsworks.com/todomvc/assets/base.css"></script>
    <![endif]-->
</head>
​
<body>
<section id="todoapp" data-sub="ns:todos_harmony">
    <header id="header">
        <h1>todos</h1>
        <input id="new-todo" placeholder="What needs to be done?" autofocus
               data-sub="val:newTask|enter;
                         $enter:handlers.addTask">
    </header>
    <section id="main" data-sub="show:tasks">
​
        <input id="toggle-all" type="checkbox" data-sub="val:isAllDone;
                                                         $change:handlers.toggleAllDone">
​
        <label for="toggle-all">Mark all as complete</label>
​
        <ul id="todo-list" data-sub="listView:tasks;toggleClass:showType">
​
            <li data-sub="{{keyToNs /}};
                          addClass:done|completed;
                          addClass:*isEditMode|editing">
​
                <div class="view">
                    <input class="toggle" type="checkbox" data-sub="val:done">
​
                    <label data-sub="text:taskName;
                                     $dblclick:*isEditMode|*true"></label>
​
                    <button class="destroy" data-sub="del:."></button>
                </div>
​
                <input class="edit" data-sub="val:taskName|enter blur;
                                              $enter blur:*isEditMode|*false;
                                              focus:*isEditMode">
            </li>
        </ul>
    </section>
    <footer id="footer" data-sub="show:tasks">
            <span id="todo-count">
                <strong data-sub="text:unfinishedCount"></strong> item
                <span   data-sub="show:unfinishedCount|>1">s</span> left
            </span>
        <ul id="filters" data-sub="tabContainer:showType">
            <li>
                <a data-tabLink="" href="#">All</a>
            </li>
            <li>
                <a data-tabLink="active" href="#">Active</a>
            </li>
            <li>
                <a data-tabLink="completed" href="#">Completed</a>
            </li>
        </ul>
        <button id="clear-completed" data-sub="show:finishedCount;
                                               $click:handlers.clearFinishedTasks">
            Clear completed (<span data-sub="text:finishedCount"></span>)
        </button>
    </footer>
</section>
<footer id="info">
    <p>Double-click to edit a todo</p>
    <p>Created by <a href="http://github.com/fredyang">Fred Yang</a></p>
    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
  
   
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://raw.github.com/fredyang/harmony/master/ref/matrix.debug.js"></script>
    <script src="http://raw.github.com/fredyang/harmony/master/ref/jsrender.js"></script>
    <script src="http://raw.github.com/fredyang/harmony/master/ref/jquery.ba-bbq.min.js"></script>
    <script src="http://raw.github.com/fredyang/harmony/master/download/harmony.js"></script>
  
</body>
  
  
</html>
​
Output

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

Dismiss x
public
Bin info
yangjh02@gmail.compro
0viewers