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

---

• Core Controllers
  • Dynamic Frame

---

• Why Binder?
• Recipes
• Reference

Arguments

Binder controllers allow passing arguments through to your JavaScript code, these are stored in your controller in the this.args object.

<controller-with-args>
    <p :render>Value={this.data.value}</p>
</controller-with-args>

<controller-with-args :start="5">
    <p :render>Value={this.data.value}</p>
</controller-with-args>

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

    class ControllerWithArgs extends Controller {
        init() {
            this.data.value = this.args.start || 0;
        }
    }

    registerControllers(ControllerWithArgs);
</script>

Built in arguments

Helpers

Binder also provides a couple of helper functions for parsing arguments.

import { parseBoolean, parseDuration } from "./binder/util.js";

// `parseBoolean` will parse `null` and the strings "0" and "false" (any casing) as `false`
// Everything else will be `true`
// This is almost compatible with the HTML5 boolean attribute, except it supports setting a false value
parseBoolean("true"); // true
parseBoolean(""); // true
parseBoolean(); // false
parseBoolean("1"); // true
parseBoolean("abc"); // true
parseBoolean("false"); // false
parseBoolean("False"); // false
parseBoolean("0"); // false
parseBoolean(0); // false

// `parseDuration` parses a duration string into milliseconds
// It supports ms, s, m and h for milliseconds, seconds, minutes and hours
parseDuration("2h"); // 7200000 (2 hours)
parseDuration("5m"); // 300000 (5 minutes)
parseDuration("45s"); // 45000 (45 seconds)
parseDuration("250ms"); // 250 (250 milliseconds)

Next: Events