the onActive event triggers before the view is active

[aarc]

I'm trying to validate a form within a view when it is displayed. But the onActive event is triggered before the view has been attached to the page.

Ideally I'd like to do something like this.

'click #step1': {
    view: _.template($('.template-step1').html()),
    onActive: function() {
        this.$el.find('.js-register-form').validate();
    }
}

But I've had to do something like this.

'click #step1': {
    view: function() {
        var $view = _.template($('.template-step1').html());
        $view.find('.js-register-form').validate();

        return $view;
    }
}

[tylerjharden]

I'm running into a similar issue with elements I am trying to use Selectize on, when switching tab views or wizard views they go back to unstyled selects because the jQuery call is running before the elements are rendered.

[ffflabs]

@aarc I've just had to deal with this issue.

My workaround, adapted to your case, would be

'click #step1': {
    view: _.template($('.template-step1').html()),
    onActive: function(modal) {
        modal.$(modal.viewContainerEl).html(modal.currentView);
        modal.$el.find('.js-register-form').validate();
    }
}

because onActive receives the instance of the parent Backbone.Modal.

[jimf]

+1, I think this makes sense. I need to think a bit more as to whether it's safe enough to move when the callback is called vs adding a second callback, but I can't think of a great reason to keep it where it is.

FWIW, you could also do the validation inside a setTimeout, but that sucks too.