Component Methods

All the methods that set properties of the component (classes, innerHTML, etc) can all be called manually. Of course, since javascript has no concept of private methods, this is always the case, but I mean it's part of the accepted API to call them manually. You don't have to use the <div iv_text="i5_properties"></div> if you don't want to. In general, my philosophy is to keep things simple, even if that means removing features, but if could be useful and it doesn't make the code any more difficult, then I'm not going to block it. I'm not Apple, here.

Some styled content
Some red bold content
Some red content
Some bold content
Visible (shouldn't see "Invisible" below)
Invisible (shouldn't see this)
Link to the demo script
Method Example Detail
render() obj.render()

Manually trigger rendering of the component. Most frequent use is as the payload of an event handler.

paused (FIELD) obj.render = true;

When set to true, render() will do nothing.

setTemplate(templateText: string, update: boolean = false) obj.setTemplate("<i-v>some-prop</i-v>")

Set the innerHTML template. If update is true, render is called at the end.

setTextTemplate(templateProperty: string = '.', update: boolean = false) obj.setHtmlTemplate("some text")

Set the innerHTML equal to the string given, escaped (the same as the :text property). If update is true, render is called at the end.

setHtmlTemplate(templateProperty: string = '.', update: boolean = false) obj.setHtmlTemplate("<div>some text</div>")

Set the innerHTML equal to the HTML given, with escaping disabled (the same as the :html property). If update is true, render is called at the end.

setLoop(source: string = '.', fragment: DocumentFragment | string, skipPostProcess: boolean = false, update: boolean = false, otherComponentId?: string) obj.setLoop("someListProperty", "<div class="inner-loop"><i-v>some-prop</i-v></div>")

Set the loop iterable and template text (the same as the :loop property & innerHTML template). If update is true, render is called at the end.

removeLoop(update: boolean = false) obj.removeLoop()

Delete the loop configuration. If update is true, render is called at the end.

setValueAttribute(source: string | undefined = '.', update: boolean = false, otherComponentId?: string) obj.setValueAttribute("some-prop")

Set the form value (the same as the :value property). If update is true, render is called at the end.

setVisibility(source: string | undefined = '.', negative: boolean = false, update: boolean = false, otherComponentId?: string) obj.setValueAttribute("some-prop")

Set the visibility source (the same as the :if property). If update is true, render is called at the end.

addBooleanAttributeMapping(attribute: string, source: string = '.', update: boolean = false, otherComponentId?: string) obj.addBooleanAttributeMapping("disabled", "some-prop")

Set the boolean attribute source (the same as the :bool:foo property). If update is true, render is called at the end.

removeAttributeMapping(attribute: string, update: boolean = false) obj.removeAttributeMapping("some-prop")

Remove an attribute mapping (boolean or otherwise). If update is true, render is called at the end.

setCssClass(cls: string | undefined = '.', update: boolean = false, otherComponentId?: string) obj.setCssClass("some-prop")

Set the CSS class source (the same as the :class property). If update is true, render is called at the end.

setCssStyle(style: string | undefined = '.', update: boolean = false, otherComponentId?: string) obj.setCssStyle("some prop")

Set the CSS style source (the same as the :style property). If update is true, render is called at the end.

addCssClassSwitch(cls: string, source: string = '.', negative: boolean = false, update: boolean = false, otherComponentId?: string) obj.addCssClassSwitch("some-class", "some-prop")

Set the CSS switch class and source (the same as the :switch:foo property). If update is true, render is called at the end.

addWriteEvent() obj.addWriteEvent()

Add an 'input' event linked to the component's write method. Same as obj.content.addEventListener('input', obj.write.bind(obj));

addWriteTarget(target: string = '.', update: boolean = false) obj.addWriteTarget("some-prop")

Set the built-in write() event to write the contents of the write to the property specified (same as :target). If update is true, render is called at the end.

removeWriteTarget(target: string, update: boolean = false) obj.removeWriteTarget("some-prop")

Remove a target for the build-in write event. If update is true, render is called at the end.

Type definitions