-
Notifications
You must be signed in to change notification settings - Fork 27
Cross Component Communication
Components save their data when forms close, if the data has changed. For modern components (model.js
logic and handlebars templates) the components will run through their logic and re-render client-side. For legacy components (server.js
or non-handlebars templates) the logic and re-rendering may be done on the server, and a warning will be written to the console.
Components can affect other components on the page by publishing and subscribing to properties (such as title
, description
, ledeImage
, etc). This allows many-to-many communication in Kiln, as multiple components can publish or subscribe to the same property, and components can publish or subscribe to multiple different properties. There are no restrictions on pubsub property names, so be sure to avoid unintended collisions!
Components that use model.js
may publish changes that they would like to propagate to other components on the page. To do so, add a _publish
property to the specified field with the name of the property it should publish to.
title:
_publish: pageTitle
_has: text
Properties will be published after a component's model.save()
function is called, allowing that component to perform logic before propagating its data. It may be useful to add extra fields to a component's schema which are only populated by model.js, if the data for them is generated from multiple user-editable fields.
# non-user-editable fields, set by model.js and used for pubsub
pageTitle:
_publish: pageTitle
_has:
fn: description
value: Plaintext page title, set by seoHeadline, shortHeadline, or primaryHeadline.
Components that want to subscribe to properties should have a _subscribe
property on the field(s) they want to update, with the name of the property it should subscribe to.
twitterTitle:
_subscribe: pageTitle
_has: text
Subscribed properties will trigger a component to save, thus allowing the subscribed component's model.save()
function to do logic on the incoming data before it's sent to the server. If multiple properties are subscribed to, Kiln will wait until all of the data has been published before triggering the save.
Kiln intelligently prevents a component from saving more than once during pubsub, so you may safely create circular pubsub logic. For example, a tags
component may update an article
's primaryTag
field, and the article
may also allow editing of that field (and propagating those changes back to tags
).
As cross-component updating is a feature of Kiln, it only works client-side. For third-party microservices or manual API calls, please make use of cascading PUTs to affect multiple components.
If you have data you want to propagate when publishing (which happens server-side), have your publishing service add that data to the locals
object, which will be passed in to all components' model.save()
function.
Kiln itself subscribes to a few specific properties, which it uses to update its index of pages. Publishing to kilnTitle
will update the page title, and kilnAuthors
will update the page authors. You can see the results in the Clay Menu.