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.

Events	Trigger	Data
`model`	Called whenever a change happens in the Content model.	The key, value pairs to be updated.
`update`	Called whenever a Contents model is about to be updated with new data from the API
`response`	Called when receiving a response form the API.	The data returned from the API.
`render`	Called just before rendering of a Content.
`rendered`	Called 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.
`live_search_update`	Called when a live_search element is about to do an update	The query used for the live search.

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-labels='["Home Page / 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-labels='["Home Page / 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>

{/* 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>