Cuttlefish Docs
  • English

    • SPZServices Object

    The SPZServices object is mounted on the window and can be used globally. This object defines registration methods, templates, and other services.

    Get Action Service

    When defining a component, if there are events to be thrown, they can be implemented through the trigger method of the Action service.

    PropertyDescriptionType
    triggerTriggers a specified event on the target element(target, eventType, event, opt_args) => boolean
    this.actions_ = SPZServices.actionServiceForDoc(); // Get the service

const event = SPZUtils.Event.create(
  this.win,
  'spz-render.finish',
  {}
);

this.actions_.trigger(this.element, 'finish', event);

    Get Template Service

    When defining a component that needs to use templates, this service is needed to find and render templates.

    PropertyDescriptionType
    renderTemplateRenders a template using the provided data and returns the rendered result(templateElement, data) => Promise<Element>
    renderTemplateArrayRenders the specified template element using the provided array of data and returns an array of result elements(templateElement, data) => Promise<Array<Element>>
    findAndRenderTemplateFinds and renders a template using the provided data and returns the rendered result(parentElement, data) => Promise<Element>
    findAndRenderTemplateArrayFinds and renders the specified template element using the provided array of data and returns an array of result elements(parentElement, data) => Promise<Array<Element>>
    findTemplateFinds a template(parentElement, opt_querySelector) => Element
    this.templates_ = SPZServices.templatesForDoc(); // Get the service
this.templates_.findAndRenderTemplate(this.element, data).then((el) => {
  // ...
});

    Get XHR Service

    When you need to request interface data, you can use the XHR service to make requests.

    PropertyDescriptionType
    fetchJsonRequests an interface and returns data in JSON format. opt_init is optional and includes all settings for the request, see fetch(input, opt_init) => Object | Array
    fetchTextRequests an interface and returns data in text format (text/plain). opt_init is optional and includes all settings for the request, see fetch(input, opt_init) => string
    this.xhr_ = SPZServices.xhrFor(this.win); // Get the service
this.xhr_.fetchJson('/api/cart').then((data) => {
  // ...
});

    Get BatchedXHR Service

    When you need to request interface data and can get the returned data path through the given element's items, you can use the BatchedXHR service to make requests.

    PropertyDescriptionType
    batchFetchJsonForGets the src attribute of the element as the default request URL (used when the url parameter is not passed). After the request is successful, the items attribute of the element (default is .) is used to get data from the specified path in the result data and return it(element, options) => any
    this.batchedXhrFor_ = SPZServices.batchedXhrFor(this.win); // Get the service
this.batchedXhrFor_.fetchJson(this.element, {
  url: '...',
  method: 'POST'
}).then((data) => {
  // ...
});

    Get Viewport Service

    This object represents the viewport. It tracks scrolling position, resizes, and other events, notifying interested parties when and how the viewport changes.

    PropertyDescriptionType
    onResizeTriggered when the document viewport size is adjusted(handler) => removeHandlerFunc
    removeResizeRemoves the onResize listener(handler) => void
    onScrollTriggered when the document viewport scrolls(handler) => removeHandlerFunc
    getScrollTopGets the scrollTop value() => number
    getSizeGets the width and height of the viewport() => Object
    getWidthGets the width of the viewport() => number
    getHeightGets the height of the viewport() => number
    enterOverlayModeEnters overlay mode, preventing scrolling at the bottom of the page(element) => void
    leaveOverlayModeLeaves overlay mode, allowing scrolling at the bottom of the page(element) => void
    this.viewport_ = this.getViewport(); // Get the service

    AI Usage Notes (LLM Ready)

    • Section density: detected 5 level-2 headings.
    • Example density: detected 5 code blocks.
    • Read conclusions first: extract definitions, constraints, and boundary conditions.
    • Then verify with examples: rely on executable snippets rather than prose only.
    • Finally cross-check: open related component pages to avoid doc/runtime drift.