gl-controller

This is the base of any GreenLight application as it defines the start of a feature on your website.

It also initializes a reactive store for the controller and its children.

Here is an example

<div gl-controller="TodoController">
  <ul>
    <template gl-for="(item,idx) in items">
      <li>
        #<span gl-bind="idx"></span>
        <p gl-bind="item"></p>
      </li>
    </template>
  </ul>
</div>

With this, you can now use all the data declare in HTML with JavaScript.

const TodoController = GreenLight.controller("TodoController");

// With this you can retreieve the store.
// What we did down here will trigger the gl-for to render the elements below.
TodoController.$store.set("items", ["Do", "Anything"]);