View
MMO.elements · 1 symbol · generated 5 Oct 2026
View
View.js:31- Namespace
MMO.elements- Extends
Template)
Index
| contentParent readonly accessor | The Map DIRECTLY holding this view's content. | |
| contentKey readonly accessor | The key holding this view's content inside contentParent. | |
| contentIndex readonly accessor | The position of this view's content inside contentParent. | |
| content accessor | The data this view renders. | |
| rootView readonly accessor | ||
| constructor(map, basepath, node, ref) | ||
| RenderView(name, node, map, basepath, ref, scope) static | Render 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) generator | Yield 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:94The Map DIRECTLY holding this view's content.
- Type
- MMO.core.Map
contentKey
readonlyaccessorView.js:103The key holding this view's content inside contentParent.
- Type
?(string|number)
contentIndex
readonlyaccessorView.js:113The position of this view's content inside contentParent.
- Type
?number
content
accessorView.js:122The data this view renders. Missing levels of the basepath are created on read.
- Type
*
rootView
readonlyaccessorView.js:249Methods45
constructor(map, basepath, node, ref)
View.js:32| map | ||
| basepath = '' | ||
| node = null | ||
| ref = null |
RenderView(name, node, map, basepath, ref, scope)
staticView.js:79Render a view that has been registered with MMO.elements.View.Define({name}, {function})
| name | string | the define name of the view renderer |
| node | HTMLElement | the root node of the view |
| map | Object | the data to inject in the view |
| basepath = '' | string | the json path of the root in map |
| ref = null | HTMLElement | null | a 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 = null | Object | an optional scope (the variable $this) for the view |
| returns | MMO.elements.View | the generated view |
getScope()
View.js:142Override Get the view's scope (or parent's scope or this) set in setScope
| returns | this | Object |
clear()
View.js:149Clear view content (but don't remove from parent)
remove()
View.js:174Remove the view for good: clear its nodes, detach it from its parent, then drop every listener registered on it. Emits remove.
detach()
View.js:192Take the view out of the dom while keeping it alive, sub views included.
- See
MMO.elements.View#reattach
reattach()
View.js:202Put a detached view back where it was.
hide()
View.js:212Hide the view's nodes with display:none, sub views included. Emits hide.
show()
View.js:221Restore the display the nodes had before MMO.elements.View#hide. Emits show.
readonly(value)
View.js:231Lock or unlock every form control the view rendered, sub views included.
| value = true | boolean |
refresh(args)
View.js:241Throw the rendered nodes away and run the renderer again.
| ...args | ...* | extra arguments for the renderer (it always gets the view first) |
loopView(path, recursive)
generatorView.js:261Yield the sub views.
| path = null | ?(string | Array) | only yield the views whose basepath is under this one |
| recursive = true | boolean | also walk the sub views of the sub views |
createView(path, node, nodeRef, root)
View.js:277Create a child view bound to a path, and register it as a sub view.
| path | string | number | Array | the child's basepath |
| node | Element | the dom node to render into |
| nodeRef = null | ?Element | insert after this node instead of at the start |
| root = null | ?MMO.core.Map | another data root; defaults to this view's |
| returns | MMO.elements.View |
removeView(view)
View.js:294Forget a sub view. It does NOT remove the view itself. MMO.elements.View#remove
| view | MMO.elements.View | |
| returns | boolean | false when the view is not a child of this one |
renderView(name, path, node, nodeRef, args)
View.js:316Create a sub view and render it with a renderer registered through MMO.elements.View.Define.
| name | string | the registered renderer's name |
| path | string | number | Array | the child's basepath |
| node | Element | the dom node to render into |
| nodeRef | ?Element | insert after this node |
| ...args | ...* | extra arguments for the renderer |
| returns | MMO.elements.View | |
| throws | MMO.Error | when no renderer goes by that name |
$view(name, path, args)
View.js:334Render a registered view at the template's current position, and move the cursor past it so the next call chains after it.
| name | string | the registered renderer's name |
| path | string | number | Array | the child's basepath |
| ...args | ...* | extra arguments for the renderer |
| returns | this |
resolvePath(path)
View.js:349Resolve path by giving a Map and a path from this map If path starts with '/', the rootView is used for the path
| path | string | integer | Array | |
| returns | [Map, Array] | the root Map and its path as an array |
walkTo(path, create)
View.js:375Walk in the map using JSON path.
| path | string | integer | Array | |
| create = false | ||
| returns | Array | [key, value, map, special] special can be $$,$#,null |
get(path)
View.js:404Get value from the content at a given path.
| path | string | integer | Array | |
| returns | * | undefined | undefined if the value does not exist |
has(path)
View.js:423Test if a value exists at a given path.
| path | string | integer | Array | |
| returns | boolean | false when the path cannot be walked, or holds no value |
getText(path)
View.js:437Get text representation of a value at a given path if path starts with '/', the path is from the content of the root view
| path | string | integer | Array | |
| returns | string |
getHTML(path)
View.js:451Get html representation of a value at a given path if path starts with '/', the path is from the content of the root view
| path | string | integer | Array | |
| returns | string |
set(path, value)
View.js:471| path | string | integer | Array | |
| value | * | |
| returns | boolean | true if the value has changed |
delete(path)
View.js:490Delete the value at a given path.
| path = '' | string | number | Array | |
| returns | boolean | true when something was deleted |
push(path, value)
View.js:516Append a value to the array at a path, creating that array when it is missing.
| path | string | number | Array | |
| value | * | |
| returns | boolean | always true |
| throws | MMO.Error | when the path holds something that is not an array |
pop(path)
View.js:532Remove and return the last value of the array at a path.
| path | string | number | Array | |
| returns | * | undefined when the path holds nothing |
| throws | MMO.Error | when the path holds something that is not an array |
merge(value)
View.js:545Merge a value into this view's content, recursively.
| value | Object | Array | Map | |
| returns | this |
watch(path, listener, onPathChange)
View.js:567Watch a value at a given path.
| path | string | integer | Array | the path at which to register the event |
| listener | Function | function (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 | ?Function | function({string} path) a function to call when path changes |
| returns | MMO.core.EventBinding | the bind |
unwatch(path, bind)
View.js:641Unwatch a value at a given path
| path | string | integer | Array | the path at which to register the event |
| bind | MMO.core.EventBinding | the one returned by watch |
| returns | ?MMO.core.EventBinding | bind or null if nothing was found |
createFunction(name, fn, onChange, args)
View.js:667Create a function
| name | string | null | a unique name for the function. If null, the index of the function is used as name |
| fn | Function | the function to be called when arguments changes. This view is used as the scope. |
| onChange | Function | function(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. |
| returns | Object | the function's object |
removeFunction(map)
View.js:708Unregister a computed function. Its watches stay connected, so prefer clearing the whole view when you want them gone too.
| map | string | Object | the function's name, or the object createFunction returned |
| returns | Object | boolean | the removed function, or false when it was not found |
getFunction(name)
View.js:720| name | string | |
| returns | number | the function's index, -1 when it is not registered |
linkAttribute(path, node, name)
View.js:739Link a dom attribute to a map path
| path | string | integer | Array | a json path |
| node | HTMLElement | |
| name | string | the attribute's name in node |
| returns | this |
$attr(name, path)
View.js:822Create a link on current node's attribute
| name | string | the attribute's name in current node |
| path | string | a json path |
| returns | this |
$attrFn(name, fn, args)
View.js:834Bind an attribute of the current node to the RESULT of a function, recomputed whenever any of its arguments changes.
| name | string | the attribute's name |
| fn | Function | function(...values): * called with the view as scope |
| ...args | ...(string | Array) | the json paths feeding the function |
| returns | this |
linkText(path, textNode, bind)
View.js:855Link a dom text to a map path
| path | string | integer | Array | the path on the map to get the value from |
| textNode | Text | the text's node |
| bind = false | boolean | if true, when the blur event of textNode's parent is triggered, update the value with the text content |
| returns | this |
$text(path, bind)
View.js:890Create a link on current node's text
| path | string | integer | Array | the path on the map to get the value from |
| bind = false | boolean | if true, when the blur event of textNode's parent is triggered, update the value with the text content |
| returns | this |
$textFn(fn, args)
View.js:905Insert a text node holding the RESULT of a function, recomputed whenever any of its arguments changes.
| fn | Function | function(...values): * called with the view as scope |
| ...args | ...(string | Array) | the json paths feeding the function |
| returns | this |
htmlUpdater(node, nodeRef)
View.js:926Return a function to set the html at a given node
| node | Element | |
| nodeRef | Element | the reference node to insert content after |
| returns | Function | function(html) that will replace the given html at the given node |
linkHtml(path, node, nodeRef, bind)
View.js:968Link a node html to a map key
| path | string | Array | the path in map to link to |
| node | Element | |
| nodeRef = null | Element | the reference node to insert content after |
| bind = false | Boolean | if true whenever the blur event is triggered on node, html is refreshed |
| returns | this |
$html(path, bind)
View.js:986Bind the current node's INNER HTML to a path.
| path | string | number | Array | |
| bind = false | boolean | also write the node's html back to the model on blur |
| returns | this |
$htmlFn(fn, args)
View.js:997Fill the current node with the html RETURNED by a function, recomputed whenever any of its arguments changes.
| fn | Function | function(...values): string|Node called with the view as scope |
| ...args | ...(string | Array) | the json paths feeding the function |
| returns | this |
loopFn(pathFn, args, renderFn, insertFn, deleteFn)
View.js:1020Create a loop with an expression in the path
| pathFn | ||
| args | ||
| renderFn | ||
| insertFn = null | ||
| deleteFn = null | ||
| returns | this |
loop(path, renderFn, insertFn, deleteFn)
View.js:1033Create a loop in view
| path | string | the path in model to iterate |
| renderFn | Function | function(view, key) |
| insertFn = null | Function | function(view, key) |
| deleteFn = null | Function | function(view, key) |
| returns | this |
test(tests)
View.js:1133Create 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.
| ...tests | ||
| returns | MMO.elements.View | this |