Component page template is compiled as ES Template. In addition it has lifecycle hooks, events handling, data managment and Virtual DOM data bindings.
It is useful to use Component page when you need page-specific logic.
Events Handling
Page Component Data
Hello! My name is ${name}. I am ${age} years old.
I like to play:
-
${likes.map((item) => $h`
- ${item} `)}
Extended Context
Component page context as Template7 page context is also extended with some additional variables.
$f7route
Contains properties of the current route:
- $f7route.url: ${$f7route.url}
- $f7route.path: ${$f7route.path}
- $f7route.params: ${JSON.stringify($f7route.params)}
- $f7route.hash: ${$f7route.hash}
- $f7route.query: ${JSON.stringify($f7route.query)}
$theme
Currently active theme:
- $theme.ios: ${$theme.ios}
- $theme.md: ${$theme.md}
- $theme.aurora: ${$theme.aurora}