Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
  <script src="https://rawgit.com/brianmhunt/knockout-fast-foreach/master/dist/knockout-fast-foreach.js"></script>
  <meta charset="utf-8">
  <title>Knockout FF Stats</title>
</head>
<body>
  <i>Check the console for run times</i>
  <br/>
  <label>
  <input type='checkbox' data-bind='checked: useFast'/>
    Use fastForEach
  </label>
<button type='button' data-bind='click:on_update_click'>
  Add items
  </button>
    <input type='text' data-bind='textInput: size' placeholder='# of items to add'/>
  
  <!-- ko ifnot: useFast -->
  <h1>Original</h1>
  <ul data-bind='foreach: list'>
    <li>
      <span data-bind='text: text'></span>
      <button type='button' data-bind='click: $parent.on_delete_click'>
        Delete
      </button>
    </li>
  </ul>
  <hr/>
  <!-- /ko -->
  
  <!-- ko if: useFast -->
  <h1>Fast</h1>
  <ul data-bind='fastForEach: {data: list, afterQueueFlush: afterQueueFlush}'>
    <li>
      <span data-bind='text: text'></span>
      <button type='button' data-bind='click: $parent.on_delete_click'>
        Delete
      </button>
    </li>
  </ul>
  <hr/>
  <!-- /ko -->
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
brianmhuntpro
0viewers