Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="10k Completed Todos (virtual-dom)">
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://todomvc.com/examples/canjs/node_modules/todomvc-common/base.css">
  <link rel="stylesheet" href="http://todomvc.com/examples/canjs/node_modules/todomvc-app-css/index.css">
</head>
<body>
  <section id="todoapp">
    <todo-app>
      <header id="header">
        <h1>10k Completed Todos<br />(virtual-dom)</h1>
        <p>
          Mark one of these <i>todos</i> incomplete. Do you notice the delay?
        </p>
      </header>
      <section id="main">
  
        <button class="initialize-btn">
          Click to render the list
        </button>
      
      </section>
    </todo-app>
  </section>
  <footer id="info">
    <p>Written by <a href="http://bitovi.com">Bitovi</a></p>
    <p>An example from the article: <a href="http://blog.bitovi.com/category/open-source/">Be proactive, not reactive - Faster DOM updates via change propagation</a></p>
  </footer>
  <script src="https://rawgit.com/akagomez/38471ac9720a17b7546c/raw/21c308811d3e95dac38f42348dbb0aa434a246f4/random-todo.js"></script>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://wzrd.in/bundle/virtual-dom@latest"></script>  
  <script src="http://wzrd.in/standalone/create-element@latest"></script>
</body>
</html>
 
body {
  padding: 15px;
}
​
h1 {
  font-size: 30px !important;
  line-height: 1.5em;
  font-weight: 200 !important;
  color: #ccc !important;
}
​
p {
  position: absolute; 
  top: -45px;
  width: 100%; 
  text-align: center;
}
​
button {
  font-size: 1.5em;
  padding: 10px;
  width: 100%;
  cursor: pointer;
}
​
button:hover {
  background-color: #efefef;
  color: #000;
}
 
// noprotect
​
console.clear();
​
var v = require("virtual-dom");
var h = v.h;
var diff = v.diff;
var patch = v.patch;
var create = v.create;
var state;
​
function setupInitialState() {
​
  state = {
    cursor: 0,
    todos: [], 
    completedTodos: [],
    numberOfTodos: 1000 * 10
  };  
  
  for (var i = 0; i < state.numberOfTodos; i++) {
    state.todos.push({
      id: i,
      title: window.generateRandomTodo(),
      completed: true
    });
  }
  
  filterTodos();
}
​
function filterTodos() {
  state.completedTodos = state.todos.filter(function (todo) {
    return todo.completed === true;
  });
}
​
function renderState ()  {
  return h('ul', { id: 'todo-list' }, state.completedTodos.map(function (todo) {
    var className = 'todo ' + (todo.completed ? "completed " : "") +
      (todo.editing ? "editing" : "")
​
    return h("li", { className: className, key: todo.id }, [
      h(".view", [
        h("input.toggle", {
          type: "checkbox",
          checked: todo.completed,
        }),
        h("label", {}, todo.title)
      ])
    ])
  }));
}
​
$(document).on('change', 'input.toggle', function (ev) {
  
  // Get the index of the toggled input element
  var index = $(ev.currentTarget).closest('li').index();
  
  var s = window.performance.now();
  
  // Update the state of the edited todo
  state.completedTodos[index].completed = false; 
  
  // Update the filtered list
  filterTodos(); 
  
  // Create the virtual DOM tree
  var newTree = renderState(); 
  
  // Compare the current and previous DOM trees
  var patches = diff(tree, newTree); 
  
  // Update the DOM
  patch(rootNode, patches);
  
  // Save a reference to the new virtual DOM tree
  tree = newTree;
  
  console.log('Update: ' + (window.performance.now() - s));
})
​
var initialized = false; 
var tree, rootNode;
​
$('.initialize-btn').click(function () {
  
  if (initialized) { return false; }
  
  initialized = true; 
  setupInitialState();
  tree = renderState(); 
  rootNode = create(tree);
  
  document.getElementById('main').innerHTML = '';
  document.getElementById('main').appendChild(rootNode);
});
​
​
​
​
Output

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

Dismiss x