Backbone.js html select / radio change事件没有触发,但click事件是

时间:2013-05-03 01:24:04

标签: backbone.js backbone-events

我正在学习骨干,但我坚持为html选项元素绑定一个onchange事件。

我尝试用“更改”或“更改#id”进行绑定,但这些都没有。 但是,“click”和“click #id”事件都有效。

<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 个答案:

答案 0 :(得分:2)

我认为目前无法使用Backbone指定下拉列表的onChange onSelect事件。

解决方法是直接使用jQuery

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));
    }
);