Binding content

Mark every piece of content that can change with a directive, so editors can change it without touching the code. x-bind fills an element or one of its attributes with a field, x-for repeats an element for every item in a list, and x-if removes an element when its value is empty. Every name you bind becomes a field in the next step. See Components.

Do

• Bind every text an editor might want to change. Leave the page structure static.
• Give each list item its own component when it has more than a few lines, or is used in more than one place.
• Pass values to CSS and JavaScript by binding them onto an attribute (x-bind:data-x="field"), then read it with document.querySelector or the CSS attr() function.

Don't

• Don't put x-for and x-bind on the same element.
• Don't hardcode settings like URLs or IDs in a script.

FAQ

When do I use x-for instead of x-bind on a list? Use x-for when every item is the same type, so you can write its markup inline, and x-bind when items can be of different types, so each one renders through its own component.

How does a component read data from outside its own object? $ is the page being rendered, so any component can read from it, like $.site.name.

Can a binding be an expression? Yes, like price.toFixed(2) + ' ' + currency.

In which order do directives run? x-for, then x-if, then x-bind, then x-bind:attr.

Example

<!-- /components/Hero.html -->
<section class="hero">
  <h1 x-bind="heading"></h1>
  <div class="actions" x-for="actions">
    <a class="btn" x-bind:href="url" x-bind="label"></a>
  </div>
</section>