KO to.JS and to.JSON

Benchmark created by Scott Messinger on October 27, 2011

Description

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.github.com/gist/1306133/c3ba61833c04320f6b4aa18a3dc375c42cb8e8ef/knockout.perfmod.js"></script>
<script src="https://raw.github.com/andrewplummer/Sugar/master/release/sugar-1.0.min.js"></script>

<div id="koTest">
        <ul data-bind="template: { name: 'item_koTmpl', 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>
  $(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", "a")
                  ,new Item(3, "three", "a")
                  ,new Item(4, "four", "a")
                  ,new Item(5, "five", "a")
                  ,new Item(6, "six", "a")
                  ,new Item(7, "seven", "a")
                  ,new Item(8, "eight", "a")
                  ,new Item(9, "nine", "a")
                  ,new Item(10, "ten", "a")
                  ,new Item(11, "eleven", "a")
                  ,new Item(12, "twelve", "a")
                  ,new Item(13, "thirteen", "a")
                  ,new Item(14, "fourteen", "a")
                  ,new Item(15, "fifteen", "a")
                  ,new Item(16, "sixteen", "a")
                  ,new Item(17, "seventeen", "a")
                  ,new Item(18, "eighteen", "a")
                  ,new Item(19, "nineteen", "a")
                  ,new Item(20, "twenty", "a")
                  ,new Item(21, "twenty-one", "a")
                  ,new Item(22, "twenty-two", "a")
                  ,new Item(23, "twenty-three", "a")
                  ,new Item(24, "twenty-four", "a")
                  ,new Item(25, "twenty-five", "a")
                  ,new Item(26, "twenty-six", "a")
                  ,new Item(27, "twenty-seven", "a")
                  ,new Item(28, "twenty-eight", "a")
                  ,new Item(29, "twenty-nine", "a")
                  ,new Item(30, "thirty", "a")
                  ,new Item(31, "thirty-one", "a")
                  ,new Item(32, "thirty-two", "a")
                  ,new Item(33, "thirty-three", "a")
                  ,new Item(34, "thirty-four", "a")
                  ,new Item(35, "thirty-five", "a")
                  ,new Item(36, "thirty-six", "a")
                  ,new Item(37, "thirty-seven", "a")
                  ,new Item(38, "thirty-eight", "a")
                  ,new Item(39, "thirty-nine", "a")
                  ,new Item(40, "forty", "a")
                  ,new Item(41, "forty-one", "a")
                  ,new Item(42, "forty-two", "a")
                  ,new Item(43, "forty-three", "a")
                  ,new Item(44, "forty-four", "a")
                  ,new Item(45, "forty-five", "a")
                  ,new Item(46, "forty-six", "a")
                  ,new Item(47, "forty-seven", "a")
                  ,new Item(48, "forty-eight", "a")
                  ,new Item(49, "forty-nine", "a")
                ])
          };  


ko.applyBindings(viewModel);

  });
</script>

Test runner

$(function(){
  var a = ko.toJS(viewModel)
  var b = ko.toJS(viewModel)
  var c = a == b
})

$(function(){
  var a = ko.toJS(viewModel)
  var b = ko.toJS(viewModel)
  var c = Object.equals(a, b)
})

$(function(){
  var a = ko.toJSON(viewModel)
  var b = ko.toJSON(viewModel)
  var c = a == b
})

Revisions

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

• Revision 1: published by Scott Messinger on October 27, 2011