Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>

<script type="text/javascript">
  _Backbone = Backbone;
  delete window.Backbone
</script>

<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/NYTimes/backbone.stickit/handlers/backbone.stickit.js"></script>

<form id="form">
  <input id="input">
  <textarea id="textarea"></textarea>
  <div id="div"></div>
  <div id="editable" contenteditable="true"></div>
  <select id="select"></select>
  <input class="boxes" type="checkbox" value="fountain">
  <input class="boxes" type="checkbox" value="evian">
  <input class="radios" type="radio" name="water" value="fountain">
        <input class="radios" type="radio" name="water" value="evian">
</form>
<script>
  Benchmark.prototype.setup = function() {
    var formHTML = document.getElementById('form').innerHTML;
        
        var viewExt = {
          initialize: function(model) {
            this.model = model;
            this.$el.html(formHTML);
          },
          bindings: {
            '#input': 'input',
            '#textarea': 'textarea',
            '#div': 'div',
            '#editable': 'editable',
            '#select': {
              collection: function() {
                return [{label:'fountain',value:'fountain'}, {label:'evian',value:'evian'}];
              }
            },
            '.boxes': 'checkbox',
            '.radios': 'radio'
          },
          render: function() {
            this.stickit();
          }
        };
        
        var modelJSON = {
          input: 'fountain',
          textarea: 'fountain',
          div: 'fountain',
          editable: 'fountain',
          select: 'fountain',
          checkbox: false,
          radio: 'fountain'
        };
        
        var masterModel = new _Backbone.Model(modelJSON);
        var masterView = new (_Backbone.View.extend(viewExt))(masterModel);
        
        var handlersModel = new Backbone.Model(modelJSON);
        var handlersView = new (Backbone.View.extend(viewExt))(handlersModel);
    
  };

  Benchmark.prototype.teardown = function() {
    masterView.remove();
    handlersView.remove();
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

masterView.render();

handlersView.render();

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:

• Revision 2: published on 6th February 2013

0 comments