How to use routable tabs events

Questions
1

I have a routable tab :

{
    path: '/home/',
    url: './pages/home.html',
    on :
    {
        pageAfterIn: function()
        {
            console.log('this event trigger successfully');
        }
    },
    tabs: [
        {
            path: '/',
            id: 'tab1',
            url: './pages/home_feeds.html',
            on: {
                pageAfterIn:function()
                {
                    console.log('tab contents loaded but event not fired');
                },
                mounted:function()
                {
                    console.log('tab contents loaded but event not fired');
                },
                init:function()
                {
                    console.log('tab contents loaded but event not fired');
                },
                tabMounted:function()
                {
                    console.log('tab contents loaded but event not fired');
                },
            }
        },
        {
            path: '/tab2/',
            id: 'tab2',
            url: './pages/home2.html',
            on :
            {
                pageAfterIn: function()
                {

                }
            }
        },
        {
            path: '/tab3/',
            id: 'tab3',
            content: '\
      <div class="block"> \
        <p>Tab 3 content</p> \
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p> \
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p> \
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p> \
      </div> \
      ',
        },
    ],
},

this route cant fire any events in #tab1 .
how can I fire an event after loading #tab1 content without using component?

2
  1. Routable tab is not a page so it doesn’t have anything related to page events
  2. If you don’t use it as component then it also doesn’t have component related hooks like mounted

You can use it like this:

{
    path: '/home/',
    url: './pages/home.html',
    on :
    {
        pageAfterIn: function(e, page)
        {
            page.$el.find('#tab1').on('tab:show', function () {
               //tab1 became visible
            });
            page.$el.find('#tab2').on('tab:show', function () {
               //tab2 became visible
            });
        }
    },
    ...
}
1 Like
3

thanks, this works for me.