Data Consumer (ph-data-consumer)

ph-data-consumer may have multiple consumers, separated by ,. Each consumer has the format of name:any value(except,)

An HTML element which consumes data.

Show response body here.

<ul ph-data-consumer="innerhtml-mustach:any-custom-value"
  id="data-consumer">
  <template>
    {{#data}}
    <li>{{name}}({{id}})</li>
    {{/data}}
  </template>
</ul>

<button
  type="button"
  name="button"
  class="btn"
  ph-ajax="/fixtures/data-consumer"
  ph-target="#data-consumer"
>
  Query
</button>

If the server returns data

{
  "data": [
    { "name": "a", "id": 1 },
    { "name": "b", "id": 2 },
    { "name": "c", "id": 3 }
  ]
}

Register Data Consumer Handler

<script type="module">
  import {
    PageHelper,
    FormEnricher,
  } from "https://cdn.jsdelivr.net/gh/jianglibo/pagehelper-docs@latest/dist/bundle.min.es.js";
  const pageHelper = new PageHelper({ debug: true }); // Cfg
  pageHelper.registerDataConsumer(
    "my-consumer-handler",
    (src, target, responseData) => {
      target.innerHTML = "";
    }
  );
  pageHelper.enrich();
</script>

Data Consumer (ph-data-consumer)

Register Data Consumer Handler

Table of contents