Backbone events example

Minimal example demonstrating communication between backbone views using events on a shared model. Feel free to use this code for whatever purpose (consider it "public domain").

by Øystein

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<input type="text" id="input" />
<span id="output"></span>

CSS

#output {
    background: #EEEEEE;
    padding: 0.2em;
}

JavaScript

(function () {
    "use strict";
    
    var SimpleModel = Backbone.Model.extend({
        defaults: function () {
            return {
                "name": ""
            };
        }
    });

    var ManipulatorView = Backbone.View.extend({
        events: {
            "keyup": "updateModelName"
        },
        render: function () {
            return this;
        },
        updateModelName: function (e) {
            this.model.set("name", this.$el.val());
        }
    });

    var PresenterView = Backbone.View.extend({
        initialize: function () {
            this.listenTo(this.model, "change:name", this.render);
        },
        render: function () {
            this.$el.html(this.model.get("name").length);
            return this;
        }

    });
    
    var model = new SimpleModel();
    var mView = new ManipulatorView({
        el: "#input",
        model: model
    });
    var pView = new PresenterView({
        el: "#output",
        model: model
    });
    pView.render();
})();