YUI data-binding - draft

index.html

<!-- A single way to bind text and attributes using Handlebars -->

<p>First name: <strong {{bind firstName}}></strong></p>
<p>Last name: <strong {{bind lastName}}></strong></p>

<!-- Computed properties work the same way without any change -->

<p>Full name: <strong {{bind fullName}}></strong></p>

<!-- Certain tags like <input type="checkbox"> have a default behavior that changes what #bind does -->

<form>
  <input type="checkbox" {{bind isChecked}} /> Check me out! 
</form>

<!-- You can also specify a specific attribute if there is no default behavior -->

<input type="text" {{bind placeholder myPlaceholder}} />

<!-- Bind events using action -->

<form {{action submit createTodo}}>
  <input id="new-todo" type="text" placeholder="What needs to be completed?" {{bind Todo.title}}>
</form>

TodoViewModel.js

/* 
 * Y.ViewModel is used as an extension of Y.View.
 * Bindings for the ViewModel are applied upon instantiation and don't require an explicit call to bind.
*/

var TodoViewModel = Y.Base.create('todoViewModel', Y.View, [Y.ViewModel], {

    title: Y.Observable('Todo.title'),

    // Any method defined here will be exposed as a candidate for 'action' data-binding
    createTodo: function () {
        var Todo     = this.get('model'),
            TodoList = this.get('modelList');

        TodoList.add(new Todo({title: "", completed: false}));
    },

    removeTodo: function (todo) {
        var TodoList = this.get('modelList');
        
        TodoList.remove(todo);
    }
}, {
    ATTRS: {
        // Models and ModelLists will have their properties exposed for 'bind' data-binding
        model: {
            value: Y.TodoMVC.Todo,
        },

        modelList: {
            value: Y.TodoMVC.TodoList,
        }
    }
});

Here's a take on simple data binding for Backbone: backbone.stickit.