Class: View

Constructor

new View(appInstance)

Create a new View instance

Parameters:

Name	Type	Description
`appInstance`	App	Reference to the parent App instance

Source: core/View.js, line 32

Examples

// Basic template rendering
app.view.render(container, `
    <h1>Welcome <%= username %></h1>
    <p><%= _lcs('greeting') %></p>
`, { username: 'John' });

// With localization helpers
app.view.render(container, `
    <h1><%= _lcs('welcome', { name: username }) %></h1>
    <p>Price: <%= _lcn(price, { style: 'currency', currency: 'USD' }) %></p>
    <time><%= _lcd(date, { dateStyle: 'long' }) %></time>
`, { username: 'John', price: 29.99, date: new Date() });

// Pre-compile templates for performance
const template = app.view.compile(`<h1><%= title %></h1>`);
// Later, use compiled template multiple times
const html1 = template({ title: 'Page 1' });
const html2 = template({ title: 'Page 2' });

Members

app :App

Parent app instance

Type:

Source: core/View.js, line 46

globalViewData :Object

Global data available to all templates

Type:

Object

Source: core/View.js, line 52

Methods

compile(template, optsopt) → {function}

Compile an EJS template into a reusable function Useful for templates that will be rendered multiple times.

Parameters:

Name Type Attributes Default Description

template

string

EJS template string

opts

object

null

EJS compiler options

Properties

Name	Type	Attributes	Default	Description
`client`	boolean	<optional>	false	Generate standalone client function
`filename`	string	<optional>		Used by cache to key caches
`strict`	boolean	<optional>	false	Use strict mode

Source: core/View.js, line 102
See: https://ejs.co/#docs

Returns:

Compiled template function that accepts data object

Type:: function

Example

// Compile once, use many times
const userCard = app.view.compile(`
    <div class="user-card">
        <h3><%= name %></h3>
        <p><%= email %></p>
    </div>
`);

const html1 = userCard({ name: 'John', email: 'john@example.com' });
const html2 = userCard({ name: 'Jane', email: 'jane@example.com' });

getHtml(tmpl, dataopt, tmplOptionsopt) → {string}

Generate HTML string from template and data without rendering to DOM

Parameters:

Name	Type	Attributes	Default	Description
`tmpl`	string			EJS template string
`data`	object	<optional>	{}	Template data
`tmplOptions`	object	<optional>	null	EJS rendering options

Source: core/View.js, line 128

Returns:

Rendered HTML string

Type:: string

Examples

// Get HTML for manual insertion
const html = app.view.getHtml(`<h1><%= title %></h1>`, { title: 'Hello' });
console.log(html); // '<h1>Hello</h1>'

// Use in AJAX response
const itemHtml = app.view.getHtml(itemTemplate, itemData);
fetch('/api/items', {
    method: 'POST',
    body: JSON.stringify({ html: itemHtml })
});

render(container, tmpl, dataopt, tmplOptionsopt)

Render template with data directly to a DOM container Automatically injects localization helpers (_lcs, _lcn, _lcd) into template data.

Parameters:

Name	Type	Attributes	Default	Description
`container`	HTMLElement			Container element to render into
`tmpl`	string			EJS template string
`data`	object	<optional>	{}	Template data variables
`tmplOptions`	object	<optional>	null	EJS rendering options

Source: core/View.js, line 172

Throws:

If container is not an HTMLElement
Type Error

Examples

// Simple rendering
app.view.render(this.app.container, `
    <h1>Hello <%= name %></h1>
`, { name: 'World' });

// With loops and conditions
app.view.render(container, `
    <ul>
    <% users.forEach(user => { %>
        <li><%= user.name %> - <%= user.email %></li>
    <% }); %>
    </ul>
    <% if (users.length === 0) { %>
        <p>No users found</p>
    <% } %>
`, { users: userList });

// Using localization helpers (auto-injected)
app.view.render(container, `
    <h1><%= _lcs('welcome') %></h1>
    <p><%= _lcs('greeting', { name: userName }) %></p>
    <span><%= _lcn(price, { style: 'currency', currency: 'EUR' }) %></span>
    <time><%= _lcd(date, { dateStyle: 'medium' }) %></time>
`, { userName: 'John', price: 99.99, date: new Date() });

renderHtml(container, html)

Render pre-generated HTML string directly to a container Uses replaceChildren() for efficient DOM updates.

Parameters:

Name	Type	Description
`container`	HTMLElement	Container element to render into
`html`	string	Pre-generated HTML string

Source: core/View.js, line 197

Throws:

If container is not an HTMLElement
Type Error

Examples

// Render pre-generated HTML
const html = '<h1>Hello</h1><p>World</p>';
app.view.renderHtml(container, html);

// Combined with getHtml
const html = app.view.getHtml(template, data);
app.view.renderHtml(container, html);

setWindowTitle(title)

Set the browser window title

Parameters:

Name	Type	Description
`title`	string	Title to set

Source: core/View.js, line 69

Examples

app.view.setWindowTitle('My App - Dashboard');

// In state onEnter
async onEnter() {
    this.app.view.setWindowTitle(`User Profile - ${userName}`);
}