Guide Menu


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




View Source
    <p :render>Value={}</p>

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

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

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


Built in arguments

Name Description Default
render-on-init Whether to call render() during init() true
auto-render If set render() will be called at the specified interval (See parseDuration below for argument format) none


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