HTML Supercharged Nodes

class SuperchargedNode

The SuperchargedNode increases the standard powers of a DOM node by providing extra methods and being aware of Observables, to which it can subscribe to react to changes.

It does also provide supercharged attributes with specially prefixed (and suffixed in some cases) attribute names that can provide a small programming interface

_render()

Use it as:

_render(callbackk, *args, **kwargs)

Any of the args or kwargs can be an observable to which the method will automatically subscribe (like for example the observables created by bindings in components)

This will call at least one callback (for the initial rendering below the node)

If any subscription has been made to observable, the rendering will be re-done with each new value passed by the observable

_fmt(*args, **kwargs)

Use it as: _fmt(*args, **kwargs)

Any of the args or kwargs can be an observable to which the method will automatically subscribe (like for example the observables created by bindings in components)

This will format the text field of the tag using the standard Format Mini Language Specification of Python.

Any arg will format the non-named templates {} sequentially and named arguments will target named templates {name}

When using observables, the formatting will update itself with each new value delivered by the observable.

_fmtvalue()

Alias: _fmtval

Use it as: _fmtvalue(*args, **kwargs)

Any of the args or kwargs can be an observable to which the method will automatically subscribed (like for example the observables created by bindings in components)

This is meant for tags like <input> which have a value field. A binding can be passed (just like in _fmt) to format the text in the field.

At the same time when the value in the field changes the binding will be fed with the new value.

Effectively, this binds the binding bi-directionally for updating the field and kicking the observable

_fmtevt()

Use it as: _fmtevt(event, *args, **kwargs) or _fmtevt.event(*args, **kwargs)

Any of the args or kwargs can be an observable to which the method will automatically subscribed (like for example the observables created by bindings in components)

This binds a generic event to notify the observables which at the same time are using for formatting the content of the tag

_bind()

Allows binding to an event, with either

  • element._bind(event, callback, *args, **kwargs)

or

  • element._bind.event(callback, *args, **kwargs)

The callback will receive the event as the first argument as in

  • callback(event, *args, **kwargs)

_bindx()

Allows binding to an event, without receiving it in the callback

  • element._bindx(event, callback, *args, **kwargs)

or

  • element._bind.event(callback, *args, **kwargs)

The callback will NOT receive the event as the first argument.

  • callback(*args, **kwargs)

_attr()

Controls the presence/absence of an attribute inside the element

It can be used as in

  • element._attr(name, trigger, on, off)

or

  • element._attr.name(trigger, on, off)

The arguments:

  • trigger: value or observable which controls if show or hide will be used

  • on: value to activate display of the element

  • off: value to hide the element

Note: if on and off are not provided, the defaults will be

"true" and "" (empty string)

_style()

Controls the presence/absence of an attribute inside the element’s style

It can be used as in

  • element._style(name, trigger, on, off)

or

  • element._style.name(trigger, on, off)

The arguments:

  • trigger: value or observable which controls if on or off will be used

  • on: value to activate display of the element

  • off: value to hide the element

Note: if on and off are not provided, the defaults will be

"true" and "" (empty string)

_display(trigger, show='', hide='none')

Controls the display value inside the style on an element.

  • trigger: value or observable which controls if show or hide will be used

  • show (default: ‘’): value to activate display of the element

  • hide (default: ‘none’): value to hide the element

Returns a reference to the element

_display_toggle(onoff=None)

Toggles/controls the display status of the element

  • onoff (default: None): if None the display status will be toggled. If either True or False, the display status will be set to on or off respectively

Returns a reference to the element

_class()

Controls the presence/absence of an attribute inside the element’s class

It can be used as in

  • element._class(name, trigger)

or

  • element._class.name(trigger)

The arguments:

  • trigger: value or observable which controls if name is part of the class or not

class_()

Adds elements to the class

It can be used as in

  • element.class_(*args)

    Each of the args will be added to the class attribute. Each arg has to be a string

or

  • element.class_.name1.name2.

    name1 and name2 will be added to the class.

Both syntaxes can be mixed:

  • element.class_('name1', 'name2').name3

Note: Because - is not an allowed character in identifiers, _ can be used and will be changed to -. This is mostly useful for the .attribute notation

classless_()

Removes elements from the class

It can be used as in

  • element.classless_(*args)

    Each of the args will be removed from the class attribute. Each arg has to be a string

or

  • element.classless_.name1.name2.

    name1 and name2 will be removed from the class.

Both syntaxes can be mixed:

  • element.classless_('name1', 'name2').name3

Note: Because - is not an allowed character in identifiers, _ can be used and will be changed to -. This is mostly useful for the .attribute notation