Controlling Data Bindings

Control how CloudCannon adds automatic data bindings to your components

With components on the page, Bookshop will create CloudCannon's Visual Data Bindings automatically if it can find the data for that component in your page's front matter.

You can customize this behavior by including a flag in the component's data. Bookshop will look for any of the following keys:

  • data_binding
  • dataBinding
  • _data_binding
  • _dataBinding

Astro templates can also use the bookshop:binding directive to disable data bindings at build time.

For example:

page.astro
copied
<Item props={props}/> 
<Item props={props} bookshop:binding={false}/> 

By default, a component will be given a data binding if possible.

This component will not be given a data binding.

This flag only applies to the tagged component and doesn't cascade down. Any subcomponents will follow the standard rules or may also specify their own Data Binding flag.

Open in a new tab