JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
<div id="sidebar">
    <p><strong>1.</strong> this is a sidebar rendered &amp; controlled by the sidebarView, </p>
    <p><strong>2.</strong> it has a button with click event bound to it, that 
        <br/> - will raise a custom event called 'myEvent'.
        <br/> - will call the function on the model to ask your name.
    </p>
    <p><input id="fireEvent" type="button" value="try me"></p>
</div>
<div id="user">
    <h1>Welcome,&nbsp;<span class="name">&nbsp;</span></h1>
    <p><strong>3.</strong> at the same time, the userview here is subscribed to
        <br/> - the 'myEvent' which toggles a simple class on the view
        <br/> - the change event of the 'name' property of this view's model.
            so if the name changed, it will do something (in this case, update the view with your name...
    </p>
    <p><strong>4.</strong> and it will prompt you for your name and update the view.
    </p>
</div>

CSS

#sidebar {
    width: 150px;
    background: #333;
    padding: 10px;
    height: 250px;
    color: white;
    float: left;
    padding-top: 60px;
    font-size: 13px;
}
#user {
    float: left;
    width: 300px;
    background: black;
    color: white;
    height: 300px;
    padding: 10px;
    font-size: 13px;
}

#user.eventHappened {
    background: red;
}

h1 {
    font-size: 25px;
    height: 50px;
}

strong {
    font-size: 20px;
    font-weight: bold;
    color: yellow;
}

h1 span.name {
    font-size: 20px;
}

#fireEvent {
    margin: 0 auto;
    width: 75px;
    height: 40px;
    border: 1px solid yellow;
    background: black;
    color: yellow;
    display: block;
    margin-top: 20px;
}

JavaScript

var app  = {views: {}};

app.user = Backbone.Model.extend({
    defaults: { name: 'Sander' },
    promptName: function(){
        var newname = prompt("Please may i have your name?:");
        this.set({name: newname});
    }
});

app.views.user = Backbone.View.extend({
    el: '#user',
    initialize: function(){
        _.bindAll(this, "render", "myEventCatcher", "updateName");
        this.model.bind("myEvent", this.myEventCatcher);
        this.model.bind("change:name", this.updateName);
        this.el = $(this.el);
    },
    render: function () {
        $('h1',this.el).html('Welcome,<span class="name">&nbsp;</span>');
        return this;
    },
    updateName: function() {
        var newname = this.model.get('name');
        console.log(this.el, newname);
        $('span.name', this.el).text(newname);
    },
    myEventCatcher: function(e) {
        // event is caught, now do something... lets ask the user for it's name and add it in the view...
        var color = this.el.hasClass('eventHappened') ? 'black' : 'red';
        alert('directly subscribed to a custom event ... changing background color to ' + color);
        this.el.toggleClass('eventHappened');
        
    }
});

app.views.sidebar = Backbone.View.extend({
    el: '#sidebar',
    events: {
        "click #fireEvent" : "myClickHandler"
    },
    initialize: function(){
        _.bindAll(this, "myClickHandler");
    },
    myClickHandler: function(e) {
        window.user.trigger("myEvent");
        window.user.promptName();
    }
});


$(function(){
    window.user = new app.user({name: "sander houttekier"});
    var userView = new app.views.user({model: window.user}).render();
    var sidebarView = new app.views.sidebar({});
});