Welcome to No.JS
Dashboard content
``` Nested remote templates (a remote template that itself contains more ``) are recursively loaded. --- ## File-Based Routing Instead of declaring each route template manually, point your `route-view` outlet at a folder. No.JS will automatically resolve route paths to template files inside that folder. ```html ``` ### How it works 1. Add `route-view` to your outlet element — file-based routing is enabled by default (config `router.templates: "pages"`). Override per-outlet with `src="folder/"`. 2. When a user navigates to `/analytics`, No.JS resolves it to `pages/analytics.tpl` 3. The template is fetched, cached, and rendered — automatically ### Attributes | Attribute | Default | Description | |-----------|---------|-------------| | `src` | `"pages"` | Base folder for template resolution (per-outlet override; config: `router.templates`) | | `route-index` | `"index"` | Filename for the root route `/` | | `ext` | `".tpl"` | File extension appended to route segments (fallback: `".html"`) | | `i18n-ns` | — | When present, auto-derives i18n namespace from filename | > **Config default:** The default `router.templates` is `"pages"`, so file-based routing works out of the box — just add `route-view` to your outlet. Override with `NoJS.config({ router: { templates: 'views' } })` or per-outlet via `src="./custom/"`. ### Example — SaaS Dashboard ``` pages/ ├── overview.tpl ← / ├── analytics.tpl ← /analytics ├── users.tpl ← /users ├── revenue.tpl ← /revenue ├── billing.tpl ← /billing └── settings.tpl ← /settings ``` ```html ``` That's it — **two lines** for a full SPA with six routes. ### Mixing Explicit & File-Based Routes Explicit `` declarations **always take priority**. This lets you combine both approaches — use file-based routing for simple pages and explicit templates for routes that need guards, params, or named outlets: ```html ``` ### Auto i18n Namespace When the `route-view` element has an `i18n-ns` attribute (even without a value), No.JS automatically loads the i18n namespace matching the filename: ```html ``` This replaces the need to add `i18n-ns="..."` on each route template individually. --- ## Lazy Template Loading Route templates support a `lazy` attribute to control when their remote file is fetched: | Value | Phase | Behaviour | |-------|-------|-----------| | *(absent)* | Auto | Active route loads before first render; others preload silently after | | `lazy="priority"` | 0 | Fetched first, before all other templates | | `lazy="ondemand"` | On demand | Only fetched the first time the user navigates to that route | ```html ``` > `lazy="ondemand"` is skipped entirely during initialisation. The router fetches the file on the first navigation and caches it for all subsequent visits. --- ## Anchor Links When using `useHash: true`, the URL hash (`#`) is used for routing (e.g. `#/docs`). This normally conflicts with standard anchor links like `` — but No.JS handles it automatically in both hash and history modes. Anchor links that point to an element `id` on the page are intercepted by the router: the target element is scrolled into view smoothly, and the clicked link receives an `active` class. The route itself is **not** affected. ```html...
...
...
Sorry, doesn't exist.
No sidebar content for this page
``` If the sidebar has no local wildcard, it falls back to the global `route="*"`. If neither exists, the built-in 404 is used. --- ### `$route.matched` The `$route.matched` boolean tells you whether the current path hit an explicit route (`true`) or a wildcard/fallback (`false`). Use it for conditional rendering inside your templates: ```html ``` `$route.matched` is set **before** the template renders, so it's always available during processing. --- ### Remote 404 Template Wildcard routes support all the same attributes as regular route templates, including `src` for remote loading: ```html ``` The remote template is fetched, cached, and rendered just like any other route template — and it has full access to `$route.path`, `$route.matched`, and all other framework features. --- ### File-Based Routing 404 When using [file-based routing](#file-based-routing), navigating to a path whose `.tpl` file doesn't exist on the server (HTTP 404 or other error) automatically triggers the wildcard fallback chain. ```html could not be loaded.