UI Extension — Data Model

MisoListModel

MisoListModel is a list model to represent search, autocomplete, and recommendation results. Typically, an element will automatically create a data model. However, you can also create a model manually:

const MisoListModel = MisoClient.ui.models.classes.MisoListModel;
const model = new MisoListModel(options);

Options

The options parameter is an object with the following properties:

API types

Possible api values and their corresponding data items are:

Data

The current state of model data. The initial state of items is an empty array.

const data = model.data;
/*
{
  items: [
    ...
  ]
}
*/

Actions

Load — Load model data asynchronously with the result of Miso API.

model.load(payload);

The optional payload object will be merged into and override the default payload.

Clear — Reset model data to initial state, an empty array.

model.clear();

Data event

Refresh — The data event when the model replaces its data entirely.

model.on('refresh', ({ data }) => {
  // the new state of model data
  if (data.length) {
    for (const item of data) {
      // render each item
    }
  } else {
    // render empty state
  }
});