secret
Created

YUI data-binding - draft

  • Download Gist
TodoViewModel.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
/*
* 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,
}
}
});
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<!-- 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>

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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.