Backbone.js html select / radio change event is no

问题:

I am learning backbone but I'm stuck at binding a onchange event for html option element.

I tried to bind with 'change' or 'change #id' but none of these fire. However, both the 'click' and 'click #id' event work.

<div id='target'>
    <select id='abc'>
        <option value=1>1</option>
        <option value=2>2</option>
    </select>
</div>
<input type='radio' name='def' value='1' checked>1</input>
<input type='radio' name='def' value='2'>2</input>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>

<script>
$(function () {
    var TargetView = Backbone.View.extend({
        el: '#target',
        events: {
            'click #abc': 'onclick',
            'click input[name=def]': 'onclick',
            'change': 'onselect',
            'change input[name=def]': 'onselect',
            'change #abc': 'onselect'
        },
        onclick: function (evt) {
            console.log('click');
            console.log($(evt.currentTarget).val());
        },
        onselect: function (evt) {
            console.log('change');
        }
    });
    new TargetView();
});
</script>

回答1:

I think currently there is no way to specify the onChange onSelect event of a drop down using Backbone.

The workaround is to use jQuery directly

var view = Backbone.View.extend({
    initialize:function () {
        // on click is ok
        this.model.on('click', this.click, this);
        // cannot bind using backbone events change for some reasons, have to use jquery to setup the event
        $('input[name="my-dropdown"]', this.el).on('change', $.proxy(this.onselect, this));
    }
);