手动触发主干视图事件

Question

我是 Backbone 的新手.js我正在尝试触发视图更改事件toggleShape，但它没有触发。

Shapes = Backbone.View.extend({
    el: '#shape',
    initialize: function () {
        _.bindAll(this, 'afterRender');
        var $el = this.$el;
        $.each(App.enums.itemEnums.measurement.shape, function (value, label) {
            $el.append(getRadioButton(value, 'measurement', label));
        });
        this.render();
        this.afterRender();
    },
    events: {
        'click input': 'toggleShape'
    },
    toggleShape: function (e) {
        console.log('a');
    },
    afterRender: function () {
        var value = '5';
        //$('input[value="' + value + '"]', this.$el).prop('checked', true); - DOES NOT WORK
        //this.trigger('change'); - DOES NOT WORK
        $('#shape input').eq(0).trigger('click'); // - DOES NOT WORK TOO!
    }
});
$(document).on('click', '#shape input', function () {
    console.log('b');
});

之后在控制台中我只能看到b，但看不到ab。
当我单击输入时，我看到一切正常，但是如何从视图功能afterRender中触发toggleShape？

控制台中没有错误。

Answer 1

您可以在构造视图期间绑定事件。使用 UI 对象，然后您应该能够从视图的其他函数调用它。

Shapes = Backbone.View.extend({
    el: '#shape',
    initialize: function () {
        _.bindAll(this, 'afterRender');
        var $el = this.$el;
        $.each(App.enums.itemEnums.measurement.shape, function (value, label) {
            $el.append(getRadioButton(value, 'measurement', label));
        });
        this.render();
        this.afterRender();
    },
    ui : {
        theInputs : '#shape input'
    },
    events: {
        'click @ui.theInputs': 'toggleShape'
    },
    toggleShape: function (e) {
        console.log('a');
    },
    afterRender: function () {
        var value = '5';
        this.ui.theInputs.trigger('click'); // - Should Work :)
    }
});