CODEWITHSUNDEEP
jquerybackbone.jsevent-handling
Justinas
Justinas

Reputation: 43557

Trigger backbone view event manually

I'm new to Backbone.js and I'm trying to trigger view change event toggleShape, but it's not triggering.

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

After that in console I only can see b, but not ab.
When I click on input, I get see that everything works, but how can I trigger toggleShape from within view function afterRender?

No errors in console.

Upvotes: 1

Views: 1964

Answers (1)

Red2678
Red2678

Reputation: 3297

You can bind events during the construction of the view. Use the UI object, then you should be able to call it from with the other functions of the view.

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

Upvotes: 1

Related Questions