CODEWITHSUNDEEP
jquerybackbone.jsmarionette
moreirapontocom
moreirapontocom

Reputation: 458

jQuery function is not firing on Backbone View Render

I have a Backbone ItemView that has some DIVs with its classes and one DIV has the class active.

I write a jQuery line to hide all elements there hasn't the class active but it's not working.

    Show.EventItemView = Marionette.ItemView.extend({
        template: '#id-template',
        events: {
            'click #js-tabs li.js-tab': 'tabs'
        },
        tabs: function(e) {
            var target = e.target,
                tab_id = $(e.currentTarget).attr('js-data-tab-id');

            $('#js-tabs .js-tab-content').hide();
            $('#js-tabs .js-tab-content#' + tab_id).show();
        },
        initialize: function() {
            $('#js-tabs .js-tab-content:not(.active)').hide();
            console.log('Initialized');
        }
    });

The "Initialized" text is being displayed on console but the elements that hasn't the class active are not being hidded.

If run this line $('#js-tabs .js-tab-content:not(.active)').hide(); directly in Chrome Console, is working but should fire automatically on view render (or other method).

Thank you for any advance.

Upvotes: 0

Views: 367

Answers (2)

vassiliskrikonis
vassiliskrikonis

Reputation: 596

initialize() is called when the view is instantiated and before the render() method. That means that the view hasn't been rendered yet. Marionette.ItemView gives you some helpful callback methods to use.

onRender() is called on each render. If you synchronise models to server this may be called several times, when the model content updates.

onShow() is called once per view shown in a region. If you use regions then use this.

Upvotes: 2

praveen
praveen

Reputation: 485

In Backbone view, initialize is the first method that is executed when a view is being rendered. so here you are trying to manipulate even before the view is rendered.

Try to move that code into the render function or after the view(page/content) is loaded.

Also try to debug in console with breakpoints to make sure if the content is loaded before executing that line of code.

Upvotes: 0

Related Questions