template vs repeat in Knockout.js (v24)

Revision 24 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js">
</script>
<script src="//rawgithub.com/mbest/knockout-repeat/master/knockout-repeat.js">
</script>
<div id="main" style="display: none">
</div>
<script id="template" type="text/html">
  < table data - bind = "template: { foreach: rows }" > < tr data - bind = "template: { foreach: cells }" > < td data - bind = "text: 'Cell ' + id()" > < /td>
        </tr > < /table>
</script>
<script id="repeat" type="text/html">
  < table > < tr data - bind = "repeat: { foreach: rows, item: '$row' }" > < td data - bind = "repeat: { foreach: $row().cells, item: '$cell', bind: 'text: \'Cell \' + $cell().id()'}" > < /td>
        </tr > < /table>
</script>
<script>
  function Cell(id) {
    this.id = ko.observable(id);
  }

  function Row(id) {
    this.id = ko.observable(id);
    this.cells = ko.observableArray();
  }

  var viewModel = {
    rows: ko.observableArray()
  };

  for (var i = 0; i < 10; i++) {
    var row = new Row(i);

    for (var j = 0; j < 10; j++) {
      row.cells.push(new Cell(i + " - " + j));
    }
    viewModel.rows.push(row);
  }
</script>

Setup

ko.removeNode($("#main")[0]);

Test runner

Ready to run.

Testing in
TestOps/sec
repeat
var main = $("#main");
main.attr("data-bind", "template: 'repeat'");
ko.applyBindings(viewModel, main[0]);
ready
template
var main = $("#main");
main.attr("data-bind", "template: 'template'");
ko.applyBindings(viewModel, main[0]);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.