Handlebars.js Templates

Support for Handlebars.js templates is contained in kvision-handlebars module and is based on webpack's handlebars loader. Templates are automatically transformed to JavaScript functions during the build process of the application.

You put your template files (with *.hbs extension) into src/jsMain/resources/hbs directory of your application. Then in your code you can just require your *.hbs files. All components which render textual content (io.kvision.html.Tag class and subclasses) have template and templates properties. The second one allows you to define different templates for other supported languages (see. Internationalization).

div {
    template = require("hbs/template.hbs")
}

div {
    templates = mapOf(
        "en" to require("hbs/template.en.hbs"),
        "pl" to require("hbs/template.pl.hbs")
    )
}

To actually call the template function and render its output in your app, you need to set some data. You can use templateData property and use plain JavaScript object. To generate one from your data you can use obj function builder.

import io.kvision.utils.obj

div {
    template = require("hbs/template.hbs")
    templateData = obj {
        name = "Alan"
        hometown = "Somewhere, TX"
        kids = arrayOf(obj {
            name = "Jimmy"
            age = "12"
        }, obj {
            name = "Sally"
            age = "5"
        })
    }
}

You can also use toObj extension function if you store your data in a class (or classes) with @Serializable annotation.

import kotlinx.serialization.Serializable
import io.kvision.utils.JSON.toObj

@Serializable
data class Kid(val name: String, val age: Int)
@Serializable
data class Person(val name: String, val hometown: String, val kids: List<Kid>)

val person = Person("Alan", "Somwhere, TX", listOf(Kid("Jimmy", 12), Kid("Sally", 5)))

div {
    template = require("hbs/template.hbs")
    templateData = person.toObj()
}

The setData extension function is a convenient shortcut for the above.

div {
    template = require("hbs/template.hbs")
    setData(person)
}