Backbone Model Binding

by Danny Michaelis

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
<div id="slide1"></div>
<div id="slide2"></div>

CSS

#slide {
  margin: 10px;
  padding: 10px;
  border: 1px black solid;  
}

JavaScript

$(function() {
    var Slide = Backbone.Model;

    var slide = new Slide({
        id: 1,
        title: "nothing"
    });

    var SlideView = Backbone.View.extend({
        initialize: function() {
            this.model.bind('change', this.render, this);
        },
        events: {
            "change input": "changeText"
        },
        changeText: function() {
            this.model.set({title: this.$("input").val()});
        },
        render: function() {
            $(this.el).html("<input type='text' value='" + this.model.get("title") + "' >");
            return this;
        }
    });

    var view1 = new SlideView({
        el: "#slide1",
        model: slide
    });

    var view2 = new SlideView({
        el: "#slide2",
        model: slide
    });
    
    slide.set({title: ""});
});