Index

View

MMO.elements · 1 symbol · generated 5 Oct 2026

class

View

View.js:31
Template synchronized with a Map of data Views content is as follow: - contentRoot: {MMO.core.Map} that contains the root of the data.class MMO.elements.View extends MMO.core.mixinEventEmitter(MMO.core.Template)
Namespace
MMO.elements
Extends
Template)
- basepath: json path in contentRoot where the actual view's data are located - contentParent: {MMO.core.Map} the direct parent of the view's actual data. Can be equal to contentRoot if basepath is a single key - content: {*} the actual data of the view. - value: {*} if content is a Map, the map is converted to a primitive Object or Array. Else same as content. - contentKey: {string|int|null} the key in contentParent to access view's content. - it is equal to basepath if it is a single key - it is null if basepath is empty - contentIndex: {int|null} the index of content in contentParent. null if basepath is empty. NOTE: If basepath is empty, contentRoot == contentParent == content View emit events : - `path`(this, oldpath): when the basepath of the view is changed. The old basepath is given as second argument - `index`(this, oldindex): when the index of the view is changed. The old index is given as second argument - `remove`(this): when the view is removed - `clear`(this): when the view is cleared - `show`(this): when the view is shown - `hide`(this): when the view is hidden - `view`(newView, this): (async) when a view is created. The new view is given as first argument and the current view as second. This event bubbles up the view parent

Index

contentParent readonly accessorThe Map DIRECTLY holding this view's content.
contentKey readonly accessorThe key holding this view's content inside contentParent.
contentIndex readonly accessorThe position of this view's content inside contentParent.
content accessorThe data this view renders.
rootView readonly accessor
constructor(map, basepath, node, ref)
RenderView(name, node, map, basepath, ref, scope) staticRender a view that has been registered with MMO.elements.View.Define({name}, {function})
getScope()Override Get the view's scope (or parent's scope or this) set in setScope
clear()Clear view content (but don't remove from parent)
remove()Remove the view for good: clear its nodes, detach it from its parent, then drop every listener registered on it.
detach()Take the view out of the dom while keeping it alive, sub views included.
reattach()Put a detached view back where it was.
hide()Hide the view's nodes with display:none, sub views included.
show()Restore the display the nodes had before MMO.elements.View#hide.
readonly(value)Lock or unlock every form control the view rendered, sub views included.
refresh(args)Throw the rendered nodes away and run the renderer again.
loopView(path, recursive) generatorYield the sub views.
createView(path, node, nodeRef, root)Create a child view bound to a path, and register it as a sub view.
removeView(view)Forget a sub view. It does NOT remove the view itself.
renderView(name, path, node, nodeRef, args)Create a sub view and render it with a renderer registered through MMO.elements.View.Define.
$view(name, path, args)Render a registered view at the template's current position, and move the cursor past it so the next call chains after it.
resolvePath(path)Resolve path by giving a Map and a path from this map If path starts with '/', the rootView is used for the path
walkTo(path, create)Walk in the map using JSON path.
get(path)Get value from the content at a given path.
has(path)Test if a value exists at a given path.
getText(path)Get text representation of a value at a given path if path starts with '/', the path is from the content of the root view
getHTML(path)Get html representation of a value at a given path if path starts with '/', the path is from the content of the root view
set(path, value)Set value at a given path if path starts with '/', the path is from the content of the root view If the path end with the following strings, value is changed to : - $$: the current key - $#: the cu…
delete(path)Delete the value at a given path.
push(path, value)Append a value to the array at a path, creating that array when it is missing.
pop(path)Remove and return the last value of the array at a path.
merge(value)Merge a value into this view's content, recursively.
watch(path, listener, onPathChange)Watch a value at a given path.
unwatch(path, bind)Unwatch a value at a given path
createFunction(name, fn, onChange, args)Create a function
removeFunction(map)Unregister a computed function.
getFunction(name)
linkAttribute(path, node, name)Link a dom attribute to a map path
$attr(name, path)Create a link on current node's attribute
$attrFn(name, fn, args)Bind an attribute of the current node to the RESULT of a function, recomputed whenever any of its arguments changes.
linkText(path, textNode, bind)Link a dom text to a map path
$text(path, bind)Create a link on current node's text
$textFn(fn, args)Insert a text node holding the RESULT of a function, recomputed whenever any of its arguments changes.
htmlUpdater(node, nodeRef)Return a function to set the html at a given node
linkHtml(path, node, nodeRef, bind)Link a node html to a map key
$html(path, bind)Bind the current node's INNER HTML to a path.
$htmlFn(fn, args)Fill the current node with the html RETURNED by a function, recomputed whenever any of its arguments changes.
loopFn(pathFn, args, renderFn, insertFn, deleteFn)Create a loop with an expression in the path
loop(path, renderFn, insertFn, deleteFn)Create a loop in view
test(tests)Create a test in view Each test is an Array<args, test, render> Except for the last one (the else statement) which SHOULD be a Function.

Properties5

contentParent

readonlyaccessorView.js:94

The Map DIRECTLY holding this view's content.

get contentParent()
Type
MMO.core.Map
Equal to `contentRoot` when the basepath is a single key, and to `content` when it is empty.

contentKey

readonlyaccessorView.js:103

The key holding this view's content inside contentParent.

get contentKey()
Type
?(string | number)

contentIndex

readonlyaccessorView.js:113

The position of this view's content inside contentParent.

get contentIndex()
Type
?number

content

accessorView.js:122

The data this view renders. Missing levels of the basepath are created on read.

get content() set content(value)
Type
*

Methods45

constructor(map, basepath, node, ref)

View.js:32
constructor(map, basepath = '', node = null, ref = null)
map
basepath = ''
node = null
ref = null

RenderView(name, node, map, basepath, ref, scope)

staticView.js:79

Render a view that has been registered with MMO.elements.View.Define({name}, {function})

static RenderView(name, node, map, basepath = '', ref = null, scope = null)
namestringthe define name of the view renderer
nodeHTMLElementthe root node of the view
mapObjectthe data to inject in the view
basepath = ''stringthe json path of the root in map
ref = nullHTMLElement | nulla reference node to inject the content before (MUST be a child of {node}). If null it will be injected as the first element of the node
scope = nullObjectan optional scope (the variable $this) for the view
returnsMMO.elements.Viewthe generated view

getScope()

View.js:142

Override Get the view's scope (or parent's scope or this) set in setScope

getScope()
returnsthis | Object

clear()

View.js:149

Clear view content (but don't remove from parent)

clear()

remove()

View.js:174

Remove the view for good: clear its nodes, detach it from its parent, then drop every listener registered on it. Emits remove.

remove()

detach()

View.js:192

Take the view out of the dom while keeping it alive, sub views included.

detach()
See
MMO.elements.View#reattach

reattach()

View.js:202

Put a detached view back where it was.

reattach()

hide()

View.js:212

Hide the view's nodes with display:none, sub views included. Emits hide.

hide()

show()

View.js:221

Restore the display the nodes had before MMO.elements.View#hide. Emits show.

show()

readonly(value)

View.js:231

Lock or unlock every form control the view rendered, sub views included.

readonly(value = true)
value = trueboolean

refresh(args)

View.js:241

Throw the rendered nodes away and run the renderer again.

refresh(...args)
...args...*extra arguments for the renderer (it always gets the view first)

loopView(path, recursive)

generatorView.js:261

Yield the sub views.

*loopView(path = null, recursive = true)
path = null?(string | Array)only yield the views whose basepath is under this one
recursive = truebooleanalso walk the sub views of the sub views

createView(path, node, nodeRef, root)

View.js:277

Create a child view bound to a path, and register it as a sub view.

createView(path, node, nodeRef = null, root = null)Emits `view` asynchronously, on this view and on every ancestor.
pathstring | number | Arraythe child's basepath
nodeElementthe dom node to render into
nodeRef = null?Elementinsert after this node instead of at the start
root = null?MMO.core.Mapanother data root; defaults to this view's
returnsMMO.elements.View

removeView(view)

View.js:294

Forget a sub view. It does NOT remove the view itself. MMO.elements.View#remove

removeView(view)
viewMMO.elements.View
returnsbooleanfalse when the view is not a child of this one

renderView(name, path, node, nodeRef, args)

View.js:316

Create a sub view and render it with a renderer registered through MMO.elements.View.Define.

renderView(name, path, node, nodeRef, ...args)
namestringthe registered renderer's name
pathstring | number | Arraythe child's basepath
nodeElementthe dom node to render into
nodeRef?Elementinsert after this node
...args...*extra arguments for the renderer
returnsMMO.elements.View
throwsMMO.Errorwhen no renderer goes by that name

$view(name, path, args)

View.js:334

Render a registered view at the template's current position, and move the cursor past it so the next call chains after it.

$view(name, path, ...args)
namestringthe registered renderer's name
pathstring | number | Arraythe child's basepath
...args...*extra arguments for the renderer
returnsthis

resolvePath(path)

View.js:349

Resolve path by giving a Map and a path from this map If path starts with '/', the rootView is used for the path

resolvePath(path)
pathstring | integer | Array
returns[Map, Array]the root Map and its path as an array

walkTo(path, create)

View.js:375

Walk in the map using JSON path.

walkTo(path, create = false)- NOTE: To get a parent, use relative notation `..` If the path end with the following strings, value is changed to : - $$: the current key - $#: the current index
pathstring | integer | Array
create = false
returnsArray[key, value, map, special] special can be $$,$#,null

get(path)

View.js:404

Get value from the content at a given path.

get(path)if path starts with '/', the path is from the content of the root view
pathstring | integer | Array
returns* | undefinedundefined if the value does not exist

has(path)

View.js:423

Test if a value exists at a given path.

has(path)if path starts with '/', the path is from the content of the root view NOTE: a walkable path is not an existing one. `walkTo` happily yields `[key, undefined, map]` for a key that is simply absent, so the value itself has to be tested -- same contract as `MMO.core.Map#exists`
pathstring | integer | Array
returnsbooleanfalse when the path cannot be walked, or holds no value

getText(path)

View.js:437

Get text representation of a value at a given path if path starts with '/', the path is from the content of the root view

getText(path)
pathstring | integer | Array
returnsstring

getHTML(path)

View.js:451

Get html representation of a value at a given path if path starts with '/', the path is from the content of the root view

getHTML(path)
pathstring | integer | Array
returnsstring

set(path, value)

View.js:471
Set value at a given path if path starts with '/', the path is from the content of the root view If the path end with the following strings, value is changed to : - $$: the current key - $#: the current indexset(path, value)
pathstring | integer | Array
value*
returnsbooleantrue if the value has changed

delete(path)

View.js:490

Delete the value at a given path.

delete(path = '')An empty path removes this view AND the value it is bound to.
path = ''string | number | Array
returnsbooleantrue when something was deleted

push(path, value)

View.js:516

Append a value to the array at a path, creating that array when it is missing.

push(path, value)
pathstring | number | Array
value*
returnsbooleanalways true
throwsMMO.Errorwhen the path holds something that is not an array

pop(path)

View.js:532

Remove and return the last value of the array at a path.

pop(path)
pathstring | number | Array
returns*undefined when the path holds nothing
throwsMMO.Errorwhen the path holds something that is not an array

merge(value)

View.js:545

Merge a value into this view's content, recursively.

merge(value)
valueObject | Array | Map
returnsthis

watch(path, listener, onPathChange)

View.js:567

Watch a value at a given path.

watch(path, listener, onPathChange = null)The function onPathChange is called whenever the path has changed The listener is called immediately after it has connected successfully.
pathstring | integer | Arraythe path at which to register the event
listenerFunctionfunction (value, map, key, special) - value: the current value - map: the current map - key: the current key in map. If null, it means value = map (root value) - special: can be $$ (key), $# (index), or null (no special)
onPathChange = null?Functionfunction({string} path) a function to call when path changes
returnsMMO.core.EventBindingthe bind

createFunction(name, fn, onChange, args)

View.js:667

Create a function

createFunction(name, fn, onChange, ...args)
namestring | nulla unique name for the function. If null, the index of the function is used as name
fnFunctionthe function to be called when arguments changes. This view is used as the scope.
onChangeFunctionfunction(value) to call when the value returned by fn changes
...args...?the JSON path of values to pass to the function. Relative path uses the view's basepath.
returnsObjectthe function's object

removeFunction(map)

View.js:708

Unregister a computed function. Its watches stay connected, so prefer clearing the whole view when you want them gone too.

removeFunction(map)
mapstring | Objectthe function's name, or the object createFunction returned
returnsObject | booleanthe removed function, or false when it was not found

getFunction(name)

View.js:720
getFunction(name)
namestring
returnsnumberthe function's index, -1 when it is not registered

linkAttribute(path, node, name)

View.js:739

Link a dom attribute to a map path

linkAttribute(path, node, name)
pathstring | integer | Arraya json path
nodeHTMLElement
namestringthe attribute's name in node
returnsthis

$attr(name, path)

View.js:822

Create a link on current node's attribute

$attr(name, path)
namestringthe attribute's name in current node
pathstringa json path
returnsthis

$attrFn(name, fn, args)

View.js:834

Bind an attribute of the current node to the RESULT of a function, recomputed whenever any of its arguments changes.

$attrFn(name, fn, ...args)
namestringthe attribute's name
fnFunctionfunction(...values): * called with the view as scope
...args...(string | Array)the json paths feeding the function
returnsthis

linkText(path, textNode, bind)

View.js:855

Link a dom text to a map path

linkText(path, textNode, bind = false)
pathstring | integer | Arraythe path on the map to get the value from
textNodeTextthe text's node
bind = falsebooleanif true, when the blur event of textNode's parent is triggered, update the value with the text content
returnsthis

$text(path, bind)

View.js:890

Create a link on current node's text

$text(path, bind = false)
pathstring | integer | Arraythe path on the map to get the value from
bind = falsebooleanif true, when the blur event of textNode's parent is triggered, update the value with the text content
returnsthis

$textFn(fn, args)

View.js:905

Insert a text node holding the RESULT of a function, recomputed whenever any of its arguments changes.

$textFn(fn, ...args)
fnFunctionfunction(...values): * called with the view as scope
...args...(string | Array)the json paths feeding the function
returnsthis

htmlUpdater(node, nodeRef)

View.js:926

Return a function to set the html at a given node

htmlUpdater(node, nodeRef)
nodeElement
nodeRefElementthe reference node to insert content after
returnsFunctionfunction(html) that will replace the given html at the given node

linkHtml(path, node, nodeRef, bind)

View.js:968

Link a node html to a map key

linkHtml(path, node, nodeRef = null, bind = false)
pathstring | Arraythe path in map to link to
nodeElement
nodeRef = nullElementthe reference node to insert content after
bind = falseBooleanif true whenever the blur event is triggered on node, html is refreshed
returnsthis

$html(path, bind)

View.js:986

Bind the current node's INNER HTML to a path.

$html(path, bind = false)
pathstring | number | Array
bind = falsebooleanalso write the node's html back to the model on blur
returnsthis

$htmlFn(fn, args)

View.js:997

Fill the current node with the html RETURNED by a function, recomputed whenever any of its arguments changes.

$htmlFn(fn, ...args)
fnFunctionfunction(...values): string|Node called with the view as scope
...args...(string | Array)the json paths feeding the function
returnsthis

loopFn(pathFn, args, renderFn, insertFn, deleteFn)

View.js:1020

Create a loop with an expression in the path

loopFn(pathFn, args, renderFn, insertFn = null, deleteFn = null)
pathFn
args
renderFn
insertFn = null
deleteFn = null
returnsthis

loop(path, renderFn, insertFn, deleteFn)

View.js:1033

Create a loop in view

loop(path, renderFn, insertFn = null, deleteFn = null)
pathstringthe path in model to iterate
renderFnFunctionfunction(view, key)
insertFn = nullFunctionfunction(view, key)
deleteFn = nullFunctionfunction(view, key)
returnsthis

test(tests)

View.js:1133

Create a test in view Each test is an Array<args, test, render> Except for the last one (the else statement) which SHOULD be a Function. If not, no else statement is used.

test(...tests)test: - {Array} args the arguments to use in the test. Like createFunction if an argument starts with '#' it is treated as a path - {Function} test function(...arguments) - {Function} render function(view, index in tests, all tests functions) the scope is also set to the view
...tests
returnsMMO.elements.Viewthis