JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<p class="something" {{bindAttr class="isA:redbg:greenbg"}}>A {{isA}}</p>
<p class="something" {{bindAttr class="isB:redbg:greenbg"}}>B {{isB}}</p>
<a {{action "toggle" target="applicationController"}}>Click me to Toggle</a>
</script>
CSS
.redbg {
background-color: red;
}
.greenbg {
background-color: green;
}
JavaScript
App = Ember.Application.create({
VERSION: '0.0.0'
});
App.ApplicationController = Ember.Controller.extend({
isA: true,
isB: false
});
App.ApplicationView = Ember.View.extend({
templateName: 'application',
toggle: function() {
this.controller.toggleProperty('isA');
this.controller.toggleProperty('isB');
}
});
App.Router = Ember.Router.extend({
enableLogging: true,
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/'
})
})
});
App.initialize();