Templating in Knockout.js

JavaScript performance comparison

Test case created by Scott Messinger

Preparation code

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.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>

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
 
ko.setTemplateEngine(ko.nativeTemplateEngine.instance);
ko.applyBindings(viewModel);
 pending…
jquery templating
 
ko.applyBindings(viewModel);
 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