How To Interpolate Templates in Stimulus

Posted on

I needed to display a set of JSON search results as HTML within a Stimulus project recently. Stimulus doesn’t offer much guidance on how to solve this out the box, so I had a little dive.

I ended up finding that lodash had a built in template function which supported interpolation. Here is the code I ended up with:

<div data-controller="search">
  <template data-target="search.resourceTemplate">
    <div class="resource">
      <h2>${title}</h2>
      <p>${description}</p>
    </div>
  </template>

  <div data-target="search.list">
    <!-- This will be replaced with the interpolated template  -->
  </div>
</div>

// controllers/search_controller.js
import { Controller } from "stimulus"
import { template } from "lodash"

export default class extends Controller {
  static get targets() {
    return [ "resourceTemplate", "list" ]
  }

  connect() {
    // https://lodash.com/docs/4.17.15#template
    // Convert the contents of the template tag, into a lodash template:
    this.resourceTemplate = template(this.resourceTemplateTarget.innerHTML);

    this._renderResults();
  }

  _renderResults() {
    // Setup some sample data to interpolate into the template.
    // In my real app, this was loaded via AJAX.
    this.itemData = {
      title: 'Sample Title',
      description: 'Sample Description'
    };

    // Pass the data to our lodash template, and it'll return a string of HTML.
    this.listTarget.innerHTML = this.resourceTemplate(this.itemData);
  }
}