Events

Handling Clerk.js events.

Events enable you to hook into the various operations performed by Clerk.js.

Event handlers can be registered by binding a handler function to the event name Clerk('on', event, callback). This will bind the handler to all subsequent occurrences of that event.

An event handler can also be bound to a subset of Clerk.js Contents by adding a CSS selector that refers to only those Clerk('on', event, css_selector, callback).

All event handlers must be a function with the following signature function(content, data) -> bool where content is the content object for the content that triggered the event and data is optional extra data related to the event.

Som events allow handlers to cancel further actions by explicitly returning false.

EventsTriggerDataCancelable
modelCalled whenever a change happens in the Content model.The key, value pairs to be updated.No
updateCalled whenever a Contents model is about to be updated with new data from the APIYes
responseCalled when receiving a response form the API.The data returned from the API.Yes
renderCalled just before rendering of a Content.Yes
renderedCalled after rendering of a content. Gives the response used to render the content as an argument.The full context of data that was used to render the content.No
live_search_updateCalled when a live_search element is about to do an updateThe query used for the live search.Yes

Example code binding en event to rendered, that prints the data.

<!-- Clerk.io content to bind event to -->
<h1>Our Most Popular Products</h1>
<span
  id="popular"
  class="clerk"

  data-api="recommendations/popular"
  data-limit="3">
  <ul class="product-list">
    {% for product in products %}
      <li class="product">
        <h2 class="product-name">{{ product.name }}</h2>
 
        <img src="{{ product.image }}" title="{{ product.name }}" />
 
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </li>
    {% endfor %}
  </ul>
</span>

<h1>Our Recommendations For You</h1>
<span
  id="personal"
  class="clerk"

  data-api="recommendations/visitor/complementary"
  data-limit="3">
  <ul class="product-list">
    {% for product in products %}
      <li class="product">
        <h2 class="product-name">{{ product.name }}</h2>
 
        <img src="{{ product.image }}" title="{{ product.name }}" />
 
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </li>
    {% endfor %}
  </ul>
</span>

<!-- Bind the different event handlers -->
<script type="text/javascript">
  // handle all rendered events
  Clerk('on', 'rendered', function(content, data) {
  	console.log('Clerk.io content rendered with', data);
  });
  
  // handle rendered events but only for popular products
  Clerk('on', 'rendered', '#popular', function(content, data) {
  	console.log('Clerk.io content rendered with', data);
  });
</script>