gl-bind

gl-bind allows you to connect your JS store with the HTML.

The functionality of this directive depends on the type of element it is attached to. For example, if you have an input like the one below.

<input gl-bind="username" placeholder="username" />

It will not only update the value of the input, but also it will update the store value that you can retrieve with JavaScript.

Controller.$store.get("username"); // This gets updated when the input does

But, for example, you want to bind the value to a p element. Here is how you do it:

<p gl-bind="username"></p>

Now, every time the username changes, it will update the p element. NOTE: It doesn't not accept any HTML and will treat it as a plain text because it is not safe to pass plain markup to the DOM.

Bind to other properties

You are not restricted to only binding to the text content or value of an element. You can bind to anything you like:

<p gl-bind:id="username"></p>

The code above will bind the username variable to the ID of the element.

You can pass as many bind points as you like, you just need to specify them on the element:

<p gl-bind:id="username" gl-bind:text="welcomeBackMessage"></p>

With this, the ID will be equal to the username variable and the text content will be equal to the welcomeBackMessage variable.

NOTE: You don't have to specify the binding point if you only need the default behaviour - if it's an input, bind the value, else bind the text content.

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.

Scope

By default, GreenLight tries to fetch the closest store to your element. It can be a controller or an element with directive data set, for example - the gl-for directive sets the closest data for each element rendered with it. If the variable set in the gl-bind directive is not available in the for loop, it will search for it in the controller store.

To access global variables, you can use the $g object to notify GreenLight that you want to fetch the Global Store.

GreenLight.$globalStore.set("appName", "Test App");

<p gl-bind="$g.appName"></p>