Backbone Radio Experiments

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.radio/0.9.0/backbone.radio.min.js"></script>
<div id="views"></div>
<div id="log"></div>

CSS

.view1 {
    background-color: red;
    padding: 10px;
}

.view2 {
    background-color: green;
    padding: 10px;
}

JavaScript

var myBus = _.extend({}, Backbone.Events),
    View1 = Backbone.View.extend({
        className: 'view1',
        initialize: function() {
            this.listenTo(myBus, 'oioioi', this.callBack);
        },
        callBack: function(data) {
            this.$el.html('myBus event heard on View1. data = ' + data.type);
        }
    }),
    View2 = Backbone.View.extend({
        className: 'view2',
        initialize: function() {
            this.listenTo(myBus, 'oioioi', this.callBack);
        },
        callBack: function() {
            this.$el.html('myBus event heard on View2');
        }
    }),
    view1 = new View1(),
    view2 = new View2();


$('#views')
    .html(view1.render().el)
    .append(view2.render().el);

myBus.trigger('oioioi', {type: 'zzz'});