Templating in Knockout.js

JavaScript performance comparison

Revision 22 of this test case created

Preparation code

<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>

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