UI Extension — Element | Miso Technologies

The <miso-list> element is a customizable list element to display search, autocomplete, and recommendation results (code example).

Attributes

api — The Miso API to retrieve data

This attribute is required to create a model automatically. If you want to create a data model manually, skip this attribute.

<miso-list api="user_to_products">...</miso-list>

See the MisoListModel for accepted values.

Payload (optional) — The default payload when calling the Miso API.

<miso-list>
  ...
  <script data-attr="payload" type="application/json">
    {
      "fl": ["*"]
    }
  </script>
  ...
</miso-list>

Auto-model (optional) — Set to false if you want to create and attach a data model manually.

<miso-list id="my-list" auto-model="false">...</miso-list>
const element = document.querySelector('#my-list');
element.model = new MisoListModel({ api, payload });

Template slot

Item — A required template to render each item of the data array.

<miso-list>
  ...
  <template data-name="item">
    <li>${data.title}: $${data.sale_price}</li>
  </template>
  ...
</miso-list>

Container (optional) — An optional template for the container element holding the items. The default value is <div></div>. It will be created one time, initially.

<miso-list>
  ...
  <template data-name="container">
    <ul></ul>
  </template>
  ...
</miso-list>

As an example, combining the two templates above renders the data like this:

<ul>
  <li>Plush Dog Toy: $17.99</li>
  <li>Chew Toy: $10.99</li>
  <li>Flying Disc: $13.99</li>
</ul>

Trigger

Start — Trigger the specified action as soon as the element and model are ready.

<miso-list on:start="load">
  ...
</miso-list>

In the example above, the element will invoke the model's load() method as soon as possible, so the result will populate soon after the page loads.

Refresh — The element dispatches a refresh custom event when it’s re-rendered.

const element = document.querySelector('miso-list');
element.addEventListener('refresh', (event) => {
  // do some side effect when the element is refreshed.
});

Attributes

Template slot

Trigger