spz-render

<spz-render
  layout="container"
  src="/api/product/similar-products?product_id=&per_page=16"
  items="data"
>
  <template>
    <div>
      <!-- ... -->
    </div>
  </template>
</spz-render>

The value of this attribute can take two forms, one is using an API URL, and the other is using script data. Src attribute usage

If this attribute is present, the template doesn’t render at the beginning unless the render or rerender action is called.

Get the data from a path in the given data object.

In the following code, if the items value is "cart" that will return data.cart array.

If the items value is "." that will return data object.

const data = {
  cart: [ /* ... */ ],
  count: 10
};

If this attribute is present, sets the min-width style for rendered content.

The element will be added this attribute when the data is being requested.

The element will be added this attribute when the data request is complete.

The element will be added this attribute when the data is empty.

render([src=<URL | API>])

To request data to render the template. If it has a src parameter, the src attribute of the element will be reassigned.

rerender(data=<Object>)

Use the passed data to render the template. It has a parameter:

• data: A data to render the template.

{
  "data": { // render data
    // ...
  },
  "originData": { // original data
    // ...
  }
}

Be automatically triggered when the element is rendered.