results when noml.render() is called on the object.
uidivuispan'span 1'uispan'span 2'
span 1span 2
NOML Element classes have a
uispan'welcome to noml'propid: 'mySpanId'
welcome to noml
var data = name: 'adam';uispan'my name is ' + dataname
my name is adam
uispan'a classy span'class'myClass'
a classy span
the NOML Element class handles de-duping of class names.
ui.span('a very classy span).class('myClass1 myClass3').class('myClass1 myClass2').class('myClass3');
a very classy span
NOML will wire to DOM events during render. the Element class wraps a few common events
uispan'click here'onClick => alert'hi!';
or you can use any other event name
uispan'mouse enter here'eventmouseenter: => alert'mouse entered!'
Noml will render modular ui elements as components that allow for special interaction such as independent re-rendering and promise resolution. to do this, expose a getBody() method.
TODO: make example
you can give the component your own id or noml will auto-assign one so it can reference it for re-rendering, etc.
if your code maintains a reference to this object, the ui can be refreshed later by calling c.render() or c.syncProps(). this technique is best for low-level components where you want immediate response. For most cases, just re-rendering the whole page is much easier to manage. (and should still be very snappy)
to make loading, ready, and failure states, simply return a promise from getBody and expose a getLoadingBody() method. noml will re-render the ui when the promise is resolved or fails.
getBodyreturn Promiseresolvespan: 'this is a resolved promise';getLoadingBodyreturn span: 'loading';
'loading' will render until the promise is resolved.
this is a resolved promise
TODO: make example
id:class:property: valuestate:property: value
Noml uses c.id and c.getStyle() to maintain the composite css object. Class names can be prepended with $ in place of . when desired (other selectors work in place of class name). Included examples show techniques to define and override default styles.
getDefaultStylereturn$clickable:cursor: 'pointer'':hover':'text-decoration': 'underline';
That is the extent of the Noml library itself. This leaves a lot of room for project architecture around it. Here is a basic example of how to begin:
start with a simple html file:
and a simple js file:
import * as noml from './Noml';import ui from './Noml';windowonload = bodyOnLoad;nomlrenderPageuispan"my first Noml app";
The included example shows a technique of structuring an application with ui, data, logic, and state all managed.