JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<div id="content"></div>
<script type="text/x-handlebars" data-template-name="index">
<div id="my_widget" class="well span3">
{{#if App.myObject.isConditionTrue}}
<div>
<button id="stop_button" class="btn btn-primary" {{action stop target="App.myObject"}}> Stop </button>
<button id="start_button" class="btn btn-primary" {{action start target="App.myObject"}}> Start </button>
<button id="record_button" class="btn btn-primary" {{action record target="App.myObject"}}>Record </button>
<p style="margin-top:15px;">{{App.myObject.state}}</p>
</div>
{{else}}
<div id="widget_warning_box" class="well">
<p> No cameras are open, open a camera in Add/Remove Cameras tab. </p>
</div>
{{/if}}
<button class="trigger" {{action triggerCondition target="App.myObject"}}>Trigger cameras</button>
</div>
</script>
CSS
#content {
margin: 20px;
}
.trigger {
position: absolute;
top: 150px;
}
JavaScript
window.App = Ember.Application.create({
rootElement: '#content'
});
App.myObject = Ember.Object.create({
isConditionTrue : false,
triggerCondition: function() {
if(this.isConditionTrue == true) {
this.set('isConditionTrue',false);
} else {
this.set('isConditionTrue',true);
}
},
start: function(event) {
console.log('Start clicked');
this.set('state','Start clicked');
},
stop: function(event) {
console.log('Stop clicked');
this.set('state','Stopped');
},
record: function(event) {
console.log('Record clicked');
this.set('state','Recording');
},
state: 'Click any button'
});
App.Router.map(function() {
this.resource('index', {path: '/'});
});