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.

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