gl-template

Sometimes, it's ugly to just create new elements to bind a custom message. This is why we created gl-template. You pass your template as following:

<div gl-template="Welcome back, {username}!"></div>

GreenLight will replace the {username} with the actual value from the store. If no variable was found, it will replace it with an empty string. Can be used with gl-if.

Bind to other properties

It's important to be flexible when working with binding data, so you can pass additional parameters to tell GreenLight where it should bind the data received.

<p gl-template:id="{username}" gl-template="Hello, {username}"></p>

The default value if you don't provide the addition is default or text. They both do the exact same thing, so you don't need to specify the binding point if you only need the simple behaviour explained above.

IMPORTANT: If you are binding to properties other than the defaults one, you might need some counter measures to prevent XSS and other similar attacks because GreenLight doesn't prevent them.

Security

As always, we take into consideration the security of your application. It doesn't just replace it with the variable name. It creates a Text node so you can't just put for example, a script tag that will run.