• Introduction
• Our First Controller
• Registering
• Rendering
• Arguments
• Events
• Binding Elements
• Observed Attributes
• Lifecycle
• The Shadow DOM

---

• Core Controllers
  • Dynamic Frame

---

• Why Binder?
• Recipes
• Reference

Rendering

Binder allows you to use JavaScript template literals wrapped in { and } within your custom elements.
Anything with the :render attribute will be rendered as a template when this.render() is called.

<render-example>
    <p :render>Hello {this.name}</p>
</render-example>

<script type="module">
    import { Controller, registerControllers } from "/static/js/binder/binder.js";

    class RenderExample extends Controller {
        init() {
            this.name = "World!";
        }
    }

    // We need to "register" all controllers, this is what connects up the HTML to the JavaScript
    registerControllers(RenderExample);
</script>

There are two render modes, the first (shown above) is a basic replacement of variables within the controller.
If you need more flexibility you can use :render.eval to use full JavaScript expressions in your template.

<render-maths>
    <p :render.eval>2 + 2 = {2 + 2}</p>
</render-maths>

<script type="module">
    import { Controller, registerControllers } from "/static/js/binder/binder.js";

    class RenderMaths extends Controller {
    }

    // We need to "register" all controllers, this is what connects up the HTML to the JavaScript
    registerControllers(RenderMaths);
</script>

Next: Arguments