HTML

<!-- HTML anywhere -->
<div data-atv-controller="hello">
  <input data-atv-hello-target="name" type="text">

  <button data-atv-action="click->hello#greet">
    Greet
  </button>

  <span data-atv-hello-target="output">
  </span>
</div>      
      

JavaScript

// app/javascripts/controllers/hello_atv.js
function connect(targets) {
  return {
    greet: function() {
      targets.output.textContent = 
        `Hello, ${targets.name.value}!`;
    }
  };
}

export { connect };