Templating in Knockout.js

JavaScript performance comparison

Revision 5 of this test case created by Scott Messinger

Preparation code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.debug.js"></script>

<div id="koTest">
        <ul data-bind="template: { name: 'item_koTmpl', foreach: items }"></ul>
</div>

<div id="jqTest"
<ul data-bind="template:{ name : 'item_jqTmpl', foreach : items}"></ul>
</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">
  <li data-bind="text: id"></li>
  <li data-bind="text: name"></li>
  <li data-bind="text: type"></li>
</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

    Test runner

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

    Java applet disabled.

    Testing in unknown unknown
    Test Ops/sec
    KO native templating NOT bound to a DOM element
    ko.setTemplateEngine(ko.nativeTemplateEngine.instance);
    ko.applyBindings(viewModel);
    pending…
    KO native templating bound to a DOM element
    ko.setTemplateEngine(ko.nativeTemplateEngine.instance);
    ko.applyBindings(viewModel, $("#koTest")[0]);
    pending…
    jquery templating NOT bound to DOM element
    ko.setTemplateEngine(new ko.jqueryTmplTemplateEngine());
    ko.applyBindings(viewModel);
    pending…
    jquery templating bound to DOM element
    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. Here’s a list of current revisions for this page:

    0 comments

    Add a comment