Templating in Knockout.js

JavaScript performance comparison

Revision 28 of this test case created by

Preparation code

<script src="https://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script src="http://knockoutjs.com/downloads/jquery.tmpl.min.js">
</script>
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js">
</script>
<div id="koTest">
  <ul data-bind="template: { name: 'item_koTmpl', foreach: items }">
  </ul>
</div>
<div id="jqTest" data-bind="template:'item_jqTmpl'">
</div>
<script id="item_koTmpl" type="text/x-jquery-tmpl">
  <li data-bind="text: id"></li>
  <li data-bind="text: name"></li><li data-bind="text: type"></li>
</script>
<script id="item_jqTmpl" type="text/x-jquery-tmpl">
  jquery template < ul > {
    {
      each(index, item) items()
    }
  } < li > $ {
    item.id()
  } < /li>
		  <li>${item.name()}</li > < li > $ {
    item.type()
  } < /li>
	  {{/each
  }
  } < /ul>
</script>
<script>
  $(function() {
    function Item(id, name, type) {
      return {
        id: ko.observable(id),
        name: ko.observable(name),
        type: ko.observable(type)
      }
    }

    window.viewModel = {
      items: ko.observableArray([new Item(1, "one", "a"), new Item(2, "two", "b"), new Item(3, "three", "a")])
    };
  });
</script>
    

Preparation code output

<script src="http://knockoutjs.com/downloads/jquery.tmpl.min.js"> </script> <script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"> </script> <div id="koTest"> <ul data-bind="template: { name: 'item_koTmpl', foreach: items }"> </ul> </div> <div id="jqTest" data-bind="template:'item_jqTmpl'"> </div> <script id="item_koTmpl" type="text/x-jquery-tmpl"> <li data-bind="text: id"></li> <li data-bind="text: name"></li><li data-bind="text: type"></li> </script> <script id="item_jqTmpl" type="text/x-jquery-tmpl"> jquery template < ul > { { each(index, item) items() } } < li > $ { item.id() } < /li> <li>${item.name()}</li > < li > $ { item.type() } < /li> {{/each } } < /ul> </script> <script> $(function() { function Item(id, name, type) { return { id: ko.observable(id), name: ko.observable(name), type: ko.observable(type) } } window.viewModel = { items: ko.observableArray([new Item(1, "one", "a"), new Item(2, "two", "b"), new Item(3, "three", "a")]) }; }); </script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
KO native templating
ko.setTemplateEngine(ko.nativeTemplateEngine.instance);
ko.applyBindings(viewModel, $("#koTest")[0]);
pending…
jquery templating
ko.setTemplateEngine(new ko.jqueryTmplTemplateEngine());
ko.applyBindings(viewModel, $("#jqTest")[0]);
pending…

Compare results of other browsers

Revisions

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

0 Comments