sample backbone radio button triggering custom view event

by alexbfree

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.modelbinding/master/backbone.modelbinding.min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.memento/master/backbone.memento.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<form id='frm'>
    <input type=radio name=option1 value=a>A</input>
    <input type=radio name=option1 value=b>B</input>
</form>

JavaScript

var myBaseView = Backbone.View.extend({});
    
var myView = myBaseView.extend({

    triggerCustomChangeEvent: function()
    {
                console.log('custom function has been activated');
                this.trigger('radioButtonChanged',1,2,3);
    },
    
    initialize: function() {
		this.constructor.__super__.initialize.apply(this);

        // bind event       
        this.$el.on('change','input[name=option1]', $.proxy(
        	this.triggerCustomChangeEvent, this));
    },    
});

// begin the test
var options = {
    el: '#frm'
};
var viewInstance = new myView(options);	

 // bind to the triggered custom event
 viewInstance.on('radioButtonChanged', function(a,b,c) 
 {
     console.log('yes, custom event was fired');
     console.log(a);
     console.log(b);
     console.log(c);
     
 });
                 
// simulate the click
$("#frm input[name=option1][value=b]").click();