Loading a tab onClick

Some features require loading content onCLick. For example, when a user clicks on an inactive tab to load its content async.

# /posts.json.props

json.posts do
  json.all do
  end

  json.pending(defer: :manual) do
  end
end
//...in your component
  render() {
    return (
      <ol className='tabs'>
        <li> tab1 </li>
        <li> <a href="/posts?bzq=data.posts.pending" data-bz-remote={true}>tab2</a> </li>
      <ol>
      ....
    )
  }

defer: :manual will instruct PropsTemplate to render the page without that node. You need to manually request the missing content using template querying like the example above.

Last updated

Was this helpful?