Skip to content

Instantly share code, notes, and snippets.

@willbailey
Created March 15, 2011 17:22
Show Gist options
  • Save willbailey/871077 to your computer and use it in GitHub Desktop.
Save willbailey/871077 to your computer and use it in GitHub Desktop.
// declare a model with some properties
Model.install('Thing', {
properties: {
color:'#000000',
background:'#00FFFF'
}
});
// declare a view with some properties
// and create appropriate setters that respond to changes
// in those properties
View.install('ThingView', {
construct: function(){
View.call(this);
},
properties: {
backgroundColor:'',
color:''
},
members: {
setColor: function(val) {
this.getNode().innerHTML = val;
this.getNode().style.color = val;
},
setBackgroundColor: function(val) {
this.getNode().style.background = val;
}
}
});
// instantiate our view and model
var model = new JX.Thing();
var view = new JX.ThingView();
view.setBinding(model, [
{
property: 'color'
},
{
viewProperty: 'backgroundColor',
modelProperty: 'background'
},
]);
// insert the view into the dom
var container = document.getElementById('bindingExample');
view.placeIn(container);
// update our model properties in a loop and observe the changes in the view
var i = 0;
var timer = setInterval(function() {
model.setColor(randomColor());
model.setBackground(randomColor());
i > 10 ? clearInterval(timer) : i++;
}, 500);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment