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
.
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>
Updated 7 months ago