Template

MMO.core · 1 symbol · generated 5 Oct 2026

class

Template

Base class for View

class MMO.core.Template

Namespace: MMO.core

Index

	promise readonly accessor	Resolved once every asynchronous piece of the template (custom elements, sub views) has finished rendering.
	lastChild readonly accessor	The last node the template rendered at its root level.
	firstChild readonly accessor	The first node the template rendered at its root level.
	parentNode readonly accessor
	nextSibling readonly accessor	Get next sibbling of last node.
	constructor(node, ref)	Constructor
	Define(name, fn) static	Register a renderer under a name, so it can be rendered by name later.
	IsDefined(name) static
	RenderTemplate(name, node, args) static	Render a registered renderer into a node.
	querySelector(selector)	Find the first rendered node matching a selector.
	querySelectorAll(selector)	Mimic querySelectorAll but return a Set instead of a NodeList
	setRoot(node, ref)	Point the template at the node it renders into.
	updateNamespace()	Remember the xml namespace of the node currently open, so `createNode` keeps building in it: inside an <svg>, `open('rect')` must produce an svg rect, not an html one.
	createNode(tag)	Build an element in the template's current namespace.
	add(node, attrs, children)	Insert a node at the template's current position, then move the cursor past it.
	detach()	Detach view from dom.
	reattach()	Reattach view into dom
	remove()	Remove view from dom
	hide()	Hide the rendered nodes, remembering the `display` each one had.
	show()	Undo `MMO.core.Template#hide`, restoring the `display` each node had.
	insertBefore(parent, ref)	Move every rendered node into another parent, and re-root the template there.
	insertAfter(node)	Move every rendered node just after another node.
	setRenderer(renderer)	Attach the function that draws this template.
	hasRenderer()
	render(args)	Run the renderer, with the template as scope.
	setScope($this)	Set `$this` variable inside an attribute handle (@example onclick="console.log(this, $this)") if function scope has not been set this == $this.
	getScope()	The object `$this` refers to inside attribute handlers.
	addEvent(node, name, fn)	Attach a dom listener AND remember it, so `MMO.core.Template#remove` can unbind it.
	setAttribute(node, name, value)	Set attribute of the node.
	attr(name, value)	Set an attribute on the node currently open.
	text(value)	Insert a text node at the template's current position.
	html(html)	Parse and insert html at the template's current position.
	open(tag, attrs)	Insert a node and descend into it: everything added next becomes its child, until
	close(tag)	Close the node currently open and go back to its parent.
	closeAll()	Close every open node and go back to the root.

Properties5

promise

readonlyaccessorTemplate.js:27

Resolved once every asynchronous piece of the template (custom elements, sub views) has finished rendering.

get promise()

Type: Promise<this>

lastChild

readonlyaccessorTemplate.js:107

The last node the template rendered at its root level. A detached node reports its placeholder, so the position in the dom stays usable.

get lastChild()

Type: ?Node

firstChild

readonlyaccessorTemplate.js:119

The first node the template rendered at its root level.

get firstChild()

Type: ?Node

parentNode

readonlyaccessorTemplate.js:129

get parentNode()

Type: Element

nextSibling

readonlyaccessorTemplate.js:138

Get next sibbling of last node.

get nextSibling()

Type: [type]

Usefull to chain template so they insert nodes right after each other

Methods30

constructor(node, ref)

Template.js:14

Constructor

constructor(node = null, ref = null)

node = null	`Element`	the dom element to insert nodes in
ref = null	`Element` \| `null`	null: push nodes in node. Element: insert nodes after this one

Define(name, fn)

staticTemplate.js:38

static Define(name, fn)

Each class gets its own registry: a Template and a View never share their names.

name	`string`
fn	`Function`	the renderer; it is called with the template as scope
throws	`MMO.Error`	when the name is already taken

IsDefined(name)

staticTemplate.js:49

static IsDefined(name)

name	`string`
returns	`boolean`	true when a renderer goes by that name

RenderTemplate(name, node, args)

staticTemplate.js:61

Render a registered renderer into a node.

static RenderTemplate(name, node, ...args)

name	`string`	the registered renderer's name
node	`Element`	the dom node to render into
...args	`...*`	arguments for the renderer
returns	MMO.core.Template
throws	`MMO.Error`	when no renderer goes by that name

querySelector(selector)

Template.js:76

Find the first rendered node matching a selector. Unlike the dom method, the template's own top level nodes are candidates too, not only their descendants.

querySelector(selector)

selector	`string`
returns	`?Element`

querySelectorAll(selector)

Template.js:88

Mimic querySelectorAll but return a Set instead of a NodeList

querySelectorAll(selector)

selector	`string`	a valid css selector
returns	`Set`

setRoot(node, ref)

Template.js:148

Point the template at the node it renders into.

setRoot(node, ref = null)

node	`Element`
ref = null	`?Element`	insert after this child of `node` instead of at the start

updateNamespace()

Template.js:158

Remember the xml namespace of the node currently open, so createNode keeps building in it: inside an <svg>, open('rect') must produce an svg rect, not an html one.

updateNamespace()

createNode(tag)

Template.js:168

Build an element in the template's current namespace.

createNode(tag)

A custom element exposing a `promise` has it collected, so `this.promise` waits for it.

tag	`string`
returns	`Element`

add(node, attrs, children)

Template.js:185

Insert a node at the template's current position, then move the cursor past it.

add(node, attrs = null, ...children)

Only nodes added at the ROOT level are tracked for remove/hide/detach.

node	`string` \| `Node`	a tag name, or an existing node
attrs = null	`?(Object` \| `Function` \| `Array)`	`MMO.core.dom.setAttributes`
...children	`...*`	`MMO.core.dom.appendChildren`: a string is text, markup goes through MMO.core.dom.html()
returns	`this`

detach()

Template.js:208

Detach view from dom. you can reattach the view using attach

detach()

reattach()

Template.js:221

Reattach view into dom

reattach()

remove()

Template.js:232

Remove view from dom

remove()

hide()

Template.js:251

Hide the rendered nodes, remembering the display each one had.

hide()

A text node has no style, so it is swapped for a hidden placeholder instead.

show()

Template.js:272

Undo MMO.core.Template#hide, restoring the display each node had.

show()

insertBefore(parent, ref)

Template.js:292

Move every rendered node into another parent, and re-root the template there.

insertBefore(parent, ref = null)

parent	`Element`	the new parent
ref = null	`?Node`	insert before this node; null appends

insertAfter(node)

Template.js:311

Move every rendered node just after another node. MMO.core.Template#insertBefore

insertAfter(node)

node Node

setRenderer(renderer)

Template.js:322

Attach the function that draws this template. Pass null to drop it.

setRenderer(renderer)

renderer ?Function called with the template as scope

hasRenderer()

Template.js:330

hasRenderer()

returns boolean true when a renderer is attached

render(args)

Template.js:340

Run the renderer, with the template as scope.

render(...args)

...args	`...*`	arguments for the renderer
returns	`Promise<this>`	resolved once the asynchronous parts have rendered too
throws	`MMO.Error`	when no renderer is attached

setScope($this)

Template.js:352

Set $this variable inside an attribute handle (@example onclick="console.log(this, $this)") if function scope has not been set this == $this.

setScope($this)

$this Object | null

getScope()

Template.js:361

The object $this refers to inside attribute handlers.

getScope()

returns Object the scope set by setScope, or the template itself

addEvent(node, name, fn)

Template.js:376

Attach a dom listener AND remember it, so MMO.core.Template#remove can unbind it.

addEvent(node, name, fn)

node	`Node`
name	`string`	the event name, without the `on` prefix
fn	`Function` \| `string`	a handler, or source compiled as `function(event, $this, $view)` with `this` bound to the node

setAttribute(node, name, value)

Template.js:401

Set attribute of the node.

setAttribute(node, name, value)

Special cases: - `onxxx`: create a function from the value and add a listener for the event. the function is called with the variable '$this' set to this or this['$this']. - `set-xxx`: set the property `xxx` of the node

node	`Element`	the node to set the attribute for
name	`string`	the attribute/property/event to set
value	`*`	any value (does not have to be a string)

attr(name, value)

Template.js:420

Set an attribute on the node currently open.

attr(name, value)

name	`string`	`MMO.core.Template#setAttribute` for the `on` and `set-` forms
value	`*`
returns	`this`

text(value)

Template.js:438

Insert a text node at the template's current position.

text(value)

value	`string`
returns	`this`

html(html)

Template.js:453

Parse and insert html at the template's current position. It is what a .jhs file's static text compiles to,   and all: markup its author wrote. Never hand it data, it runs (MMO.core.Template#text).

html(html)

NOTE: the nodes are NOT tracked, so remove/hide/detach do not reach them.

html	`string`
returns	`this`

open(tag, attrs)

Template.js:476

Insert a node and descend into it: everything added next becomes its child, until

open(tag, attrs = null)

See: MMO.core.Template#close

tag	`string` \| `Element`	a tag name, or an existing element
attrs = null	`?(Object` \| `Function` \| `Array)`
returns	`this`

close(tag)

Template.js:491

Close the node currently open and go back to its parent.

close(tag = null)

tag = null	`?string`	close everything up to the closest node with this tag name
returns	`this`

closeAll()

Template.js:510

Close every open node and go back to the root.

closeAll()

returns	`this`
throws	`MMO.Error`	when the open node is not under the root any more