How can I know the app's current view?

Questions
1

I’m using a multi-view layout with the toolbar at the bottom and I need to hide it in one of the pages. How do I do that? I’m thinking of having the app detect the current page and if it’s the correct page, the toolbar will be hidden using CSS. Or is there a better way to do it?

I search the forums and read about app.views.main.router.url but I can’t get it to work. Where should I add it, and can you give me the code that comes along with it?

Thanks!

2

Hello,

if you are using route events, like

 on:{
   pageInit:function(e,page){
     console.log(page.view);
   }
 }

you will find current information about your view (id, el, and so on…)

3

Or app.views.current

4

Thanks for your replies.:slight_smile: I need something that will trigger every time I access the page. Like showing an alert only for every time I go to the About view and not on others.

I tried @Francois-Xavier_G’s solution but it triggers for every page and only on initialization. If I go back the the intended view, it doesn’t trigger.

@nolimits4web, where should I add app.views.current? I added it to $$(document).on(‘page:init’, ‘.page[data-name=“about”]’, function (e) {}) but like the first one it only works upon initialization. page:reinit doesn’t seem to do the job either. :confused:

I’m sorry I’m going to need more lines of code. I was still learning V1 when V2 was released and now I kind of have to relearn how some things are done.

Thanks in advance.

5 
{
  path: '/about/',
  url: './pages/about.html',
  name: 'about',
  on:{
    pageInit:function(e,page){
      console.log('about is init')
    },
    pageReinit:function(e,page){
      console.log('about is reinit')
    }
  }
}
6

Hi @plpl, thanks for taking time to answer my question. I tried your solution but pageReinit doesn’t get triggered. :confused:

Hmmm… I’m reading this part of the docs:

There could be situation when we need to get currently active View, because instead of main app view we may also have view in opened popup, popover, opened panel, tabs, etc. This method allows to get the View instance of currently active/visible/“most-top” view.

For example, if you have initilized View in panel, and panel is currently opened, then this method will return panel’s view. Or, if you use app with tab bar layout, where each tab is view, then this method will return currently active/visible tab-view

app.views.current - get currently active/visible View instance.

Method returns object with just created View instance.

I’m curious where I should add app.views.current so it gets the correct active view each time it changes? Can someone provide an example?

I really appreciate you guys helping me out. Again, thanks in advance :slight_smile:

7

i guess i didn’t understand you
what are you trying to do?

8 
///Dom7('.views').on('tab:show','.view',function(e){
Dom7(document).on('tab:show','.view',function(e){
  var view=e.target.f7View;
  console.log(view) 
});
9

Hi @plpl, thanks for the code. :slight_smile: now I can execute code whenever the current tab changes. However I don’t use Vue so var view=e.target.f7View; won’t work for me. Is there another way to get the current view’s name? I replaced it with this:

$$(document).on('tab:show','.view',function(e){
  var view=app.views.current;
  alert(app.view.name);
});

As stated in the docs, app.views.current indeed returns an object, but when I try to use app.view.name it returns undefined. I got that solution from another thread. What do you think could be wrong? :confused:

10

What is app.view.name? Maybe just view.name?

11

Hi @nolimits4web, I just tried view.name but I still got undefined. Can you tell me how to get values from the object that app.views.current returns please? I have no idea what I’m doing. :confused:

12 
console.log(app.views.current)

To see what it has, and it is documented at http://framework7.io/docs/view.html#view-methods-properties

13

Hey everyone. I get it now. :slight_smile: I didn’t add a name parameter when I created the views, that’s why I got undefined undefined values when I try to use app.views.current.name. Now my code looks like this:

var homeView = app.views.create('#view-home', {
  url: '/',
  name: 'home'
});

Thanks for all your help!