Backbone.js的HTML选择/收音机更改事件不点火，但单击事件 [英] Backbone.js html select / radio change event is not firing, but click event is

问题描述

我学习骨干，但我被困在了HTML选项元素绑定onchange事件。

我试图用改变或者变革#ID但这些火灾的结合。
然而，无论是点击和点击#ID'事件的工作。

 ＆LT; D​​IV ID ='目标'＆GT;
    ＆LT;选择一个id ='ABC'＆GT;
        ＆LT;期权价值= 1＆GT; 1 LT; /选项＆GT;
        ＆LT;期权价值= 2  -  2 LT; /选项＆GT;
    ＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT;输入类型='无线电'名称='高清'值='1'检查→1＆LT; /输入＆GT;
＆LT;输入类型='无线电'名称='高清'值='2'＆GT; 2'; /输入＆GT;
＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =htt​​p://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =htt​​p://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js＆GT;＆下; /脚本＆GT;＆LT;脚本＆GT;
$（函数（）{
    VAR =的TargetView Backbone.View.extend（{
        EL：#target'，
        事件：{
            点击#abc'：'的onclick'，
            点击输入[名称=高清]'：'的onclick'，
            变：ONSELECT'，
            改变输入[名称=高清]'：'ONSELECT'，
            改变#abc'：'ONSELECT
        }，
        的onclick：函数（EVT）{
            的console.log（'点击'）;
            的console.log（$（evt.currentTarget）.VAL（））;
        }，
        ONSELECT：功能（EVT）{
            的console.log（'变'）;
        }
    }）;
    新的TargetView（）;
}）;
＆LT; / SCRIPT＆GT;
 

解决方案

我觉得目前还没有办法指定一个下降的OnChange onSelect事件下使用骨干。

解决方法是使用jQuery直接

  VAR视图= Backbone.View.extend（{
    初始化：功能（）{
        //上点击就可以了
        this.model.on（'点击'，this.click，这一点）;
        //不能使用绑定骨干事件由于某些原因发生变化，必须使用jQuery来设置事件
        $（输入[名称=我-下拉]，this.el）。在（'变化'，$ .proxy（this.onselect，这一点））;
    }
）;
 

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>

解决方案

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

这篇关于Backbone.js的HTML选择/收音机更改事件不点火，但单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！