Closer Look at Tags

Even though tags are just very thin wrappers around native DOM elements, they do have some functionality that is worth knowing. If you want to deal with the DOM element directly, you can always access that through tag.dom

var element = <> "Hello"
element # => Imba.Tag - thin wrapper
element.dom # => HTMLDivElement - real dom element


There are a few methods you can override on custom tags to hook into the lifecycle of a tag. Here we override all these methods in our custom Example tag

tag Example
def build
# called once, before properties are set
# setting an instance variable 'counter'
@counter = 0
def setup
# called once, after properties are set
def mount
# called when tag has been added to the document
# schedule tag (to call tick) every 1000ms
schedule(interval: 1000)
def unmount
# called when tag has been removed from the document
# unscheduling the tag
def tick
# called when/if tag is scheduled and scheduler is active
# default is to call render
def render
# declare inner view
<h1> "Title: {data:name}"
<h3> "Counting {@counter++}"
# Mount an instance of Example - with some data
Imba.mount <Example[{name: "Lifecycle"}]>


Access the raw DOM Element for this tag.


Returns the dom.classList

Returns the data bound to this tag.


Does nothing by default. Override to do custom rendering.

tag.trigger(name, data = null)

Trigger custom event on this tag. Events will bubble like native events, but are dispatched and processed directly inside the Imba.Event system, without generating a real browser Event. Optionally supply data for the event in the second argument.

tag CustomList < ul
def select item


Call to activate the scheduler for this tag. The default options are events: true. See Imba.Scheduler for other options.

tag Clock
def mount
# when element is inserted in document
# schedule to re-render every second:
schedule(interval: 1000)
tag App
def mount
# when element is inserted in document
# schedule to re-render after every handled event
schedule(events: true)


Deactivate the scheduler for this tag.




Returns value of inline style named name

tag.css(name, value)

Setting styles

var node = <div>
# with key and value
# with object
node.css(display: 'block', position: 'absolute')
<div css:display='block'>
# inline styles are actually using the css-method
# Imba.createElement('div').css('display','block').end()