How to trigger function after render template

Question

I am using marionette in my application. I am showing ItemView through regions like in the following.

var productInfoViewObj=new productInfoView.ProductInfoView({model:tagInformationModel.tagInformationModelObj});
exports.MyApp.bodyContainer.show(productInfoViewObj);

This is the code, I written inside view.

   exports.ProductInfoView=Backbone.Marionette.ItemView.extend({
        domInfo:{
            mainTemplateId:"tagProductListTpl",
            tableTemplateId:"taginfoViewTpl",
            tableContentDiv:"taginfoViewDiv",
            //tad Info
            tagInfoTabId:"tagInfoBtn",
            productInfoTabId:"productInfoBtn"
        },
        template:function(){
            return commonFunctions.templateCompilation("tagProductListTpl","");
        },
        onRender:function(){
            console.log(document.getElementById("productInfoBtn"));
        }
    });

I am passing templateId and data as arguments to commonFunctions.templateCompilation. It will compile and return compiled string. That compiled result passing to template.

As per my assumption, after completion of template, onRender function will trigger. What I mean before onRender, dom will available whatever we are templating using template.

But I am getting null inside onRender function.

I want a callback, it should trigger after template available in dom. so I can access elements whatever I templated using template.

I can do one thing, whatever I written inside onRender, I can setup time like in the following way.

 onRender:function(){
    setTimeout(function(){console.log(document.getElementById("productInfoBtn"));},1000);
 }

If I set time, working fine but it's not correct way to implement.

can anyone help me.

Thanks.

Answer 1

It's resolved, I have to use onShow instead of onRender function. Now it's working fine.