JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://2lemetry-assets.s3.amazonaws.com/javascripts/demo/jquery-1.7.1.min.js"></script>
<script src="http://2lemetry-assets.s3.amazonaws.com/javascripts/demo/json2.js"></script>
<script src="http://2lemetry-assets.s3.amazonaws.com/javascripts/demo/underscore.min.js"></script>
<script src="http://2lemetry-assets.s3.amazonaws.com/javascripts/demo/backbone.min.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.marionette/master/lib/backbone.marionette.min.js"></script>
<div id="default-region">
<script id="template-layout" type="text/template">
MyLayout
<div id="region-content">
MyContent
<button id="signup">signup</button>
</div>
</script>
</div>
CSS
.disabled {
background-color: gray;
}
CoffeeScript
# (Supposedly) allow dynamic adding of events.
Backbone.View::addEvents = (events) ->
@delegateEvents _.extend(_.clone(@events), events)
class Els
constructor: () ->
@signupButton = 'button#signup'
events: () ->
events = { }
events['click ' + @signupButton] = 'clickSignup'
events
class UI extends Backbone.Model
disableButton: () ->
$(els.signupButton).addClass('disabled')
class MyRegion extends Backbone.Marionette.Region
el: '#default-region'
class MyLayout extends Backbone.Marionette.Layout
template: '#template-layout'
regions:
content: '#region-content'
#events:
#'click button#signup': 'clickSignup'
initialize: (options) ->
# This seems correct
alert JSON.stringify(options.dynamicEvents)
# FAIL!
@addEvents options.dynamicEvents
close: () ->
@remove()
@unbind()
clickSignup: (event) ->
ui.disableButton()
# App
els = new Els()
ui = new UI()
app = new Backbone.Marionette.Application()
app.start { }
region = new MyRegion()
region.show new MyLayout(
dynamicEvents: els.events()
)