Skip to content

@clarle /TodoViewModel.js secret
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
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 -->
<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>
/*
* 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,
}
}
});
@ericf

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.