Element Rendering

Clerk.js Element (aka Content) is any part of a website that is fully controlled by Clerk.js.

Given a Elements parameters and Template Clerk.js will return the Element as a finished HTML block to be rendered by the browser.

By default any HTML with the class clerk will be initiated as a Element when Clerk.js is loaded as Clerk.js calls Clerk('content', '.clerk') upon load.

To control rendering, for example for single-page apps, simply change this class to something else, to render results on page changes. Make sure to destroy the Element block and insert it again before rendering if the visitor returns to the page. This is to ensure Clerk.js does not see the block as already rendered.

Clerk.js can be configured to automatically render elements with custom selectors in a session after initialising them once, with auto_init_custom_selectors: true.

Initialization

To initiate a HTML element as a Clerk.js Element just call Clerk('content', '#element-id').

When a Element is initiated the data- variables are read as the Elements initial parameters.

Otherwise additional initial parameters can be provided through the JavaScript API as an extra argument Clerk('content', '#clerk-search', {query: 'lightsaber', limit: 60});.

Some parameters are treated in a special way upon initialisation but are all optional:

All other parameters will be sent as arguments to the Clerk.io API.

Here is an example of how to initialise a Element automatically and manually.

<!-- Automatically Initialised -->
<div class="clerk"
     
     data-api="search/search"
     data-template="#clerk-template"
     data-labels='["Search Page"]'
     
     data-query="jedi"
     data-limit="20">
</div>


<!-- Manually Initialised -->
<div id="clerk-content"
     
     data-api="search/search"
     data-template="#clerk-template"
     data-labels='["Search Page"]'
     
     data-query="jedi"
     data-limit="20">
</div>

<script type="text/javascript">
  // initialize Clerk.io content via JavaScript.
  Clerk('content', '#clerk-content');
</script>


<!-- Shared template for both contents -->
<script type="text/x-template" id="clerk-template">
  <h1>Search result for {{ query }}.</h1>
  
  {% for product in products %}
  	<div class="product">
      <h2>{{ product.name }}</h2>
      <img src="{{ product.image }}" />
      <a href="{{ product.url }}">Buy Now</a>
    </div>
  {% endfor %}
  
  <a href="javascript:Clerk('content', '#{{ content.id }}', 'more', 20);">Load More Results</a>
</script>

Dynamic Changes

Clerk.js provides an easy JavaScript interface for dynamically working with Elements.

To access the JavaScript interface for a Element simply provide a callback function to receive the Element interface object.

Clerk('content', '#clerk-search', function(content) {
  // log the current content
  consle.log('Clerk.io Element', content.id, content.element);
  
  // log the current search query
  console.log('Clerk.io Search Param', content.param('query'));
  
  // update the search param
  content.param('query', 'new search query');
  
  // load 20 extra search products
  content.more(20);
});

Each element have the following JavaScript interface: