Access to element inside page

Let’s assume multiple pages with the same type of elements.
Using IDs everywhere would be overkill and, as multiple pages (2, if I remember properly) are still preserved in DOM, there would be a element conflict, in example, multiple "<input class='username'>" stored in two different pages.


isn’t always available, in example, I don’t have “page” without using

app.on('pageInit', function(page) {

So, how can I access the current active page, without using tons of selectors every time ?
What I would like to avoid is to prefix everything with the current page selector (ie “.page[data-name=“login”]” or “.page-current”)

$('.page-current') - if you have one view

There is no way to get the specific element (if you have more than one) without prefixing selector

view.router.currentPageEl also refers to current page element

Interesting, but “view” is not defined.

It is for example. You should reference your app’s view

Are you referring to something like this:

var mainView = app.views.create('.view-main');


Sorry for this silly questions but i’m really new to this awesome framework. The ability to use plain javascript without Angular, TypeScript or so, it’s gorgeous

If you created View like that then yes, it will be:


If you init view automatically with <div class="view view-main view-init"></div>:


That you very much. I wasn’t aware of view-init class.

How safe is to rely on .page-current selector inside the page:init event ?

If I understood properly, page:init will trigger when a page is shown, thus, .page-current should always bound to the page triggering the page:init event, right ?

Asking this because app.views.main.router.currentPageEl is undefined but app.views.main.router is set as the router instance.

go to
open console
type this:


In my project it doesn’t work.
Anyway, it simply return the element based on .page-current class, thus my question here Access to element inside page is still valid