Multiple app events when using tabbed views

Questions
1

Hi there,

I have been stuck on something which seems quite easy to resolve but I can not get my head around it.

I am using a multiple tabbed view which I installed using the new CLI interface but I am having an issue initialising functions on multiple tabs (Views) such as searchbar as an example. It works on one tab but doesn’t on the others. I have tried utilising pageAfterOut and pageInit to destroy the searchbar and re initialise but because the view is not actually being closed, they do not work. Any advice would be highly appreciated.

I have tried initialising directly from the html component ‘searchbar-init’ as well as the export methods on pageInit like so:

var self = this;
var searchbar = self.$app.searchbar.create({
el: ‘.searchbar’,
searchContainer: ‘.tab .list’,
searchIn: ‘.item-title’,
on: {
search(sb, query, previousQuery) {
console.log(query, previousQuery);
}
}
});

A seperate little issue todo with formatting, the messagebar is always under the tabbar. I have had to add a padding of 50px to raise it, I’m not sure why that is the case.

2

el: ‘.searchbar’

=>

el : self.$el.find('.searchbar');

3

Hi shastox,

Thank you for your prompt response, I have tried to change it as you said
el : self.$el.find(’.searchbar’);
as well as
el : page.$el.find(’.searchbar’);
but neither work. It only works when I do el : ‘.searchbar’;