Templating in Knockout.js (v22)

Revision 22 of this benchmark created on

Preparation HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js">
</script>
<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js">
</script>

<ul data-bind="template: { name: 'itemTmpl', foreach: items }">
</ul>
<script id="itemTmpl" type="text/html">
  <li data-bind = "text: name"> </li>
</script>
<script>
  function Item(id, name, type) {
    return {
      id: ko.observable(id),
      name: ko.observable(name),
      type: ko.observable(type)
    }
  }
  var viewModel = {
    name: ko.observable("nameTest"),
    person: ko.observable({
      firstName: "Bob"
    }),
    items: ko.observableArray([
    new Item(1, "one", "a"), new Item(2, "two", "b"), new Item(3, "three", "a")]),
    itemFlag: ko.observable(true)
  };
  
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
KO native templating
ko.setTemplateEngine(ko.nativeTemplateEngine.instance);
ko.applyBindings(viewModel);
ready
jquery templating
ko.applyBindings(viewModel);
ready

Revisions

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