手动触发 backbone 查看事件

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

手动触发 backbone 查看事件

Trigger backbone view event manually

jquery

event-handling

backbone.js