Knockout vs Rivets

Benchmark created by dpogue on November 25, 2012

Preparation HTML

<!-- Knockout -->
<div id="koapp">
  Knockout:
  <span data-bind="foreach: data"><span data-bind="text: $data"></span></span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>

<script>
  var KOData = ko.observableArray();
  var KOviewmodel = {data: KOData};
  
  ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
  var KOclear = function (){
    KOData.splice(0, KOData().length);
  };
  var KOpush = function (data){
    KOData.push(data);
  };
</script>


<!-- Rivets -->
<div id="rvapp">
  Rivets:
  <span data-each-arr="item.data"><span data-text=".arr"></span></span>
</div>

<script src="https://raw.github.com/mikeric/rivets/master/lib/rivets.js"></script>
<script src="https://raw.github.com/melanke/Watch.JS/master/src/watch.min.js"></script>

<script>
  var RVData = [];
  var RVviewmodel = {data: RVData};

  rivets.configure({
    adapter: {
      subscribe: function(obj, keypath, callback) {
        watch(obj, keypath, callback)
      },
      unsubscribe: function(obj, keypath, callback) {
        unwatch(obj, keypath, callback)
      },
      read: function(obj, keypath) {
        return obj[keypath]
      },
      publish: function(obj, keypath, value) {
        obj[keypath] = value
      }
    }
  });
  
  rivets.bind(document.getElementById('rvapp'), {item: RVviewmodel});

  var RVclear = function (){
    RVData.splice(0, RVData.length);
  };
  var RVpush = function (data){
    RVData.push(data);
  };
</script>

Test runner

KOclear();
for (var i = 0; i < 10; i++)
  KOpush("koitem");

RVclear();
for (var i = 0; i < 10; i++)
  RVpush("rvitem");

Revisions

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

• Revision 1: published by dpogue on November 25, 2012