Comparison of different data-binding frameworks for YUI

luke.js

var BoundView = Y.Base.create('bound', Y.View, [Y.DataBind], {
            render: function () {
                var container = this.get('container');

                container.append(
'<form><p><label>Field 1: <input name="f1" data-bind-attr="field1" value="field 1 value"></label></p> <p>Field 2: <label><input name="f2" data-bind-attr="field2" type="radio" value="a" checked> 2a</label> <label><input name="f2" data-bind-attr="field2" type="radio" value="b"> 2b</label> <label><input name="f2" data-bind-attr="field2" type="radio" value="c"> 2c</label> </p> <p><label>Field 3: <input name="f3" data-bind-attr="field3" type="checkbox" value="field 3 value"></label></p> <p><label>Field 4: <input name="f4" data-bind-attr="field4" type="hidden" value="field 4 value"></label></p> <p><label>Field 5: <textarea name="f5" data-bind-attr="field5">field 5 value</textarea></label></p> <p><label>Field 6: <select name="f6" data-bind-attr="field6"> <option value="a" selected>6a</option> <option value="b">6b</option> <option value="c">6c</option> </select> </label> </p> </form>');

                this._bindAttrs({
                    field1: '[name=f1]',
                    field2: '[name=f2]',
                    field3: '[name=f3]',
                    field4: '[name=f4]',
                    field5: '[name=f5]',
                    field6: '[name=f6]'
                }, this.get('model'));

                this.syncToUI();
            }
        });

mjata.html

<ul data-list="name:TodoList;id:my_todos" data-tmpl="add:todo;reset:todos">
    <li data-model="name:Todo;id:my_todo1">
        <span data-attr="name:desc">Grocery shopping</span>
        <span data-attr="name:due">9/12/2012</span>
        <span data-attr="name:status" data-tmpl="change:thumbUpOrDown"></span>
    </li>
    <li data-model="name:Todo;id:my_todo2">
        <span data-attr="name:desc">Return books to library</span>
        <span data-attr="name:due">9/14/2012</span>
        <span data-attr="name:status" data-tmpl="change:thumbUpOrDown"></span>
    </li>
</ul>
<p>
    Total Number of Todos: <span data-list="name:TodoList;id:my_todos" data-tmpl="*:countTodos">2</span>
</p>

stick.js

Y.BookView = Y.Base.create('bookView', Y.View, [Y.DataBind.Stick], {
    
    bindings: {
      '#title': 'title',
      '#author': 'authorName',
      '#header': {
        observe: ['title', 'authorName'],
        onGet: function (values) {
          return values[0] + ', written by ' + values[1];
        }
      }
    },

    render: function () {
      this.bindAttrs();
    }
  }, {
    ATTRS: {
      container: {
        valueFn: function () {
          return Y.one("#container");
        }
      }
    }
  });