Play Ground for Alpine and Pagehelper

Loading.......

Load Others

Logs clear

dump demo store

JS’s both, before, after

For Alpine.js, some times need prepare the data and store before innerHTML into document.

So it’s better to run before.

Go to lets-script.com, write your code snippets and share it by the url like:

https://pagehelper.lets-script.com/playground/?id=xx&uid=xx

Docs

echo any data to mock server response

Add ph-params="echo:::#playground-json/value" to the ph-ajax="https://pagehelper.lets-script.com/ph-misc/echo" link will bring the json value to the server and echo back for testing.

when echo query parameter exists,always echo this value
if is post method, echo the body

Using ph-params="echo:::__function__/mock_echo to mock more real data, the function_name is written in the JS tab. like one bellow.

window.mock_echo = (kvs, method) => {
    console.log(kvs['page'] + '.............')
    const page = parseInt(kvs['page'] || '1')
    const size = parseInt(kvs['size'] || '2')
    const data = []
    let idx = page * 10
     const max = idx + size
    for(;idx<max;idx++) {
      data.push({
        "id": idx,
        "task": "Item " + idx,
        "dueDate": "2021-01-01",
        "priority": "high"
      })
    }
     return JSON.stringify({ data });
}

This page already add a demos Alpine store

<div
  x-data
  x-init="$store.demos.a=1"
>
  <span x-text="$store.demos.a"></span>
</div>

Play Ground for Alpine and Pagehelper

JS’s both, before, after

Share your Code

Docs