Skip to content

Cross Component Communication

Nelson Pecora edited this page Jun 26, 2017 · 1 revision

Saving Components

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.

Cross-Component Communication

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!

Publishing

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.

Subscribing

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.

PubSub Tips

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 Subscribers

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.