Backbone Views B - Events

Views and Events

by BarDev

HTML

<script src="https://raw.github.com/documentcloud/underscore/1.4.2/underscore.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/0.9.2/backbone.js"></script>
<div id="container-movie1"></div>

<script type="text/template" id="template-movie">
    Title: <%=title%>
    Year: <%=yearReleased%>
    Rating: <%=mpaaRating%>
    Average Rating: <%=averageRating%>
</script>

<div id="updateTitle"> 
    <input type="text" id="txtTitle"></imput>    
</div>

JavaScript

var Movie = Backbone.Model.extend({});

var MovieView1 = Backbone.View.extend({
    initialize: function(options){
        this.template = options.template;
        this.model.on("change", this.render, this);
    },

    render: function(){
        console.log("MovieView1 render");
        this.$el.html(template(this.model.toJSON()));
        return this;
    },

});


var UpdateTitleView = Backbone.View.extend({
    el: "#updateTitle",
    initialize: function(options){
        console.log("UpdateTitleView render");
        console.log(this.el);
    },
    events:{
        "keyup #txtTitle": "titleChange"  
    },                                           
    titleChange: function(event){
        console.log("Title changed");
        console.log(this.el);
        console.log(event.currentTarget);
        //console.log($(event.currentTarget).val());
        this.model.set({title: $(event.target).val()});
    }    
});


var movie = new Movie({
    title: "Happy Gilmore",
    yearReleased: 2006,
    mpaaRating: "R",
    averageRating: 4.6
});

var template = _.template($("#template-movie").html());


var movieView1 = new MovieView1({model: movie, template: template});
movieView1.render();
var container = $("#container-movie1");
container.html(movieView1.$el);

movie.set({title: "Billy Madison"});

var updateTitleView = new UpdateTitleView({model: movie});