Skip to content

@clarle /TodoViewModel.js secret

Embed URL


Subversion checkout URL

You can clone with
Download ZIP
YUI data-binding - draft
<!-- 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 -->
<input type="checkbox" {{bind isChecked}} /> Check me out!
<!-- 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}}>
* 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');
}, {
// 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.