Backbone ModelBinder calculated

by Jimmy Mabey

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="https://raw.github.com/theironcook/Backbone.ModelBinder/master/Backbone.ModelBinder.min.js"></script>
Hours left 1: <input name="hoursLeft1"><br>
Hours left 2: <input name="hoursLeft2">

JavaScript

$(function()
{
    SomeModel = Backbone.Model.extend({
        defaults: {currentHours: 3, totalHours: 8},
    
        calculateHoursLeft: function()
        {
            console.log(this.get ? 'this == model' : 'this != model');
            return this.get('totalHours') - this.get('currentHours');
        }
    })
    
    SomeView = Backbone.View.extend({
        el: 'body',
        initialize: function()
        {
            this.modelBinder = new Backbone.ModelBinder();
        },
        render: function()
        {
            var self = this;
    
            var bindings = {
                currentHours: [
                    // Works:
                    {
                        selector: '[name=hoursLeft1]',
                        converter: function() { return self.model.calculateHoursLeft(); }
                    },
                            
                    // Doesn't work:
                    {
                        selector: '[name=hoursLeft2]',
                        converter: this.model.calculateHoursLeft
                    }
                ]                
            };
    
            this.modelBinder.bind(this.model, this.el, bindings);
        }
    });

    var model = new SomeModel();
    var view = new SomeView({model: model});
    view.render();
});