@fragment

Used to identify a section of output that can be cached based on the presently known request-time dependencies or any dependencies resolved by nested elements or nested @dependency tags.

Parameters

There are no parameters for this tag.

Examples

Example #1: Restaurant List

Here is a template block that lists restaurants:

{@fragment}
    {@query sort="title" skip="2" limit="7" type="custom:restaurant"}
       <table>
       {#rows}
          <tr>
             <td>{_doc}</td>
             <td>{title}</td>
          </tr>
       {/rows}
       </table>
    {/query}
{/fragment}

Note that the @query tag supports a cache parameter. If set to true, the @query tag will perform caching for you that is identical to the above:

As such, the above can be expressed identically like this:

{@query sort="title" skip="2" limit="7" type="custom:restaurant" cache="true"}
   <table>
   {#rows}
      <tr>
         <td>{_doc}</td>
         <td>{title}</td>
      </tr>
   {/rows}
   </table>
{/query}

Note that not all tags support the cache parameter. As such, you can use the @fragment tag to enable caching at your discretion.

Example #2: Custom Dependencies

As with other caching elements, you can use the @dependency tag to inform the @fragment tag of external dependencies that the cached elements should be dependent upon.

Imagine we have a page where the browser can pass in a theme:

/helloworld.html?theme=red /helloworld.html?theme=green

We might use this information in a template like this:

{@fragment}
   <div style="background-color: {request.query.theme}; height: 100px">Hello World</div>
{/fragment}

Where the background-color of the box is informed by the theme request parameter.

The problem here is that the @fragment tag will cache once. The first person to render the page will cause the fragment to cache and it will cache with whatever color was used at that time. The next person to request the fragment will get the same generated output (regardless of what theme information they provided).

We can solve this by telling the @fragment tag that it's rendition is dependent upon theme:

{@fragment}
   {@dependency type="requires" key="theme" value="{request.query.theme}"}
   <div style="background-color: {request.query.theme}; height: 100px">Hello World</div>
{/fragment}

With the @dependency tag in place, the @fragment will cache one rendition per theme. Users who set theme to red will get the red cached element. Users who set theme to green will get the green cached element, and so on.