spz-render#

#When to Use

• When you need to retrieve and render data through one or multiple interfaces.
• When you need to render using script data.

#Code Demonstration

#Basic Usage

The most basic usage, retrieving data through an interface.

<spz-render layout="container" src="/api/customers/login_settings">
  <template>
    <div>
      <!-- ... -->
    </div>
  </template>
</spz-render>

#Retrieving Data Through a Script

<script id="render-data" type="application/json">
  {
    "name": "John von Neumann",
    "brief": "He was a Hungarian-American mathematician, physicist, computer scientist, engineer and polymath.",
    "imageSrc": "https://img.staticdj.com/5da228ddd934fd6ffecb3f95e985ee5a.gif"
  }
</script>

<spz-render layout="container" src="script:render-data">
  <template>
    <div class="introduction-wrapper">
      <spz-img layout="fixed" width="80" height="80" src="${data.imageSrc}" alt="${data.name}" object-fit="cover"></spz-img>
      <div class="introduction-content">
        <p>${data.name}</p>
        <div>${data.brief}</div>
      </div>
    </div>
  </template>
</spz-render>

#Properties

#src Data Source Methods

The src property value can use ; to configure multiple data sources. There are three ways to retrieve data:

• Retrieve data through an API interface
• script:<scriptId>: Retrieve data through script
• spz-script:<spzScriptId>: Retrieve data through spz-script

#Methods

#render

Re-request data for rendering.

#rerender

Render with new data passed.

#Events

finish

This event automatically triggers when rendering finishes. When using the rerender method with the once parameter set to true and if it's not the first render, this event will not be triggered.

afterOnceFinish

This event automatically triggers when calling the rerender method with the once parameter set to true and it's not the first render.

#AI Summary (LLM Ready)

• Component ID: spz-render
• One-line purpose: Retrieve data and render it.
• Detected attribute rows: 0
• Detected method subsections: 2
• Detected event subsections: 2
• Top attribute names: none (needs manual completion)
• Top method names: render, rerender
• Top event names: finish, afterOnceFinish
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/