{"result":{"depiction_url":null,"edges":{"hasreference":{"objects":[{"created":"2026-10-07T11:13:41Z","object_id":{"id":2943,"is_a":["text","documentation","developerguide"],"name":"developer_template_components","title":{"_type":"trans","tr":{"en":"Reuse markup with includes and categories"}},"uri":"https:\/\/zotonic.com\/id\/2943"},"seq":1},{"created":"2026-10-07T11:13:41Z","object_id":{"id":2325,"is_a":["text","documentation","cookbook"],"name":null,"title":{"_type":"trans","tr":{"en":"Render template values safely"}},"uri":"https:\/\/zotonic.com\/id\/2325"},"seq":2}],"predicate":{"id":2774,"is_a":["meta","predicate"],"name":"hasreference","title":{"_type":"trans","tr":{"en":"Documentation reference"}},"uri":"https:\/\/zotonic.com\/id\/hasreference"}},"refers":{"objects":[{"created":"2026-10-07T11:13:02Z","object_id":{"id":1326,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_include","title":"include","uri":"https:\/\/zotonic.com\/id\/1326"},"seq":1000000},{"created":"2026-10-07T11:13:02Z","object_id":{"id":1383,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_with","title":"with","uri":"https:\/\/zotonic.com\/id\/1383"},"seq":1000000},{"created":"2026-10-07T11:13:02Z","object_id":{"id":2506,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_compose","title":"compose","uri":"https:\/\/zotonic.com\/id\/2506"},"seq":1000000}],"predicate":{"id":2409,"is_a":["meta","predicate"],"name":"refers","title":{"_type":"trans","tr":{"en":"Refers"}},"uri":"https:\/\/zotonic.com\/id\/refers"}},"subject":{"objects":[{"created":"2026-10-07T11:13:41Z","object_id":{"id":2557,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_cookbook_recipe","title":"Cookbook recipe","uri":"https:\/\/zotonic.com\/id\/2557"},"seq":1},{"created":"2026-10-07T11:13:41Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-10-07T11:13:41Z","object_id":{"id":2620,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template","title":"Template","uri":"https:\/\/zotonic.com\/id\/2620"},"seq":3},{"created":"2026-10-07T11:13:41Z","object_id":{"id":2612,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_data_processing_and_formatting","title":"Data processing and formatting","uri":"https:\/\/zotonic.com\/id\/2612"},"seq":4}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":1588,"is_a":["text","documentation","cookbook"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1588"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_cookbook_frontend_share_variable","page_url":{"en":"https:\/\/zotonic.com\/cookbook\/1588\/share-a-value-between-template-components","x-default":"https:\/\/zotonic.com\/cookbook\/1588\/share-a-value-between-template-components"},"preview_url":null,"resource":{"body":{"_type":"trans","tr":{"en":"<p>A variable created inside an included template does not become a global variable for the caller. Calculate the value in the caller and pass it to each component:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">{% with id.title as heading %}\n    {% include &quot;_garden_heading.tpl&quot; heading=heading %}\n    {% include &quot;_garden_details.tpl&quot; heading=heading %}\n{% endwith %}\n<\/code><\/pre>\n<p>Use <a href=\"\/id\/1383\" class=\"doc-reference doc-reference-tag\"><code>tag#with<\/code><\/a> for a local binding, <a href=\"\/id\/1326\" class=\"doc-reference doc-reference-tag\"><code>tag#include<\/code><\/a> for a component and <a href=\"\/id\/2506\" class=\"doc-reference doc-reference-tag\"><code>tag#compose<\/code><\/a> when the caller must supply blocks to that component. Keep related markup and its initialization together where practical.<\/p>\n<p>For browser initialization, use <code>{% javascript %}<\/code> so the normal script pipeline handles it. If data must enter JavaScript, use the JavaScript\/JSON encoding appropriate to that context; HTML escaping is not a JavaScript encoder. For example:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">&lt;span id=&quot;{{ #heading }}&quot;&gt;{{ id.title }}&lt;\/span&gt;\n{% javascript %}\n    const heading = document.getElementById(&quot;{{ #heading }}&quot;);\n    heading.classList.add(&quot;is-ready&quot;);\n{% endjavascript %}\n<\/code><\/pre>\n<p>Here the browser reads the already rendered element; resource text is not interpolated into a script literal.<\/p>"}},"category_id":{"id":318,"is_a":["meta","category"],"name":"cookbook","title":{"_type":"trans","tr":{"en":"Cookbook"}},"uri":"https:\/\/test.zotonic.com\/id\/318"},"content_group_id":{"id":339,"is_a":["meta","content_group"],"name":"default_content_group","title":{"_type":"trans","tr":{"en":"Default Content Group"}},"uri":"https:\/\/zotonic.com\/id\/default_content_group"},"created":"2020-05-30T05:47:27Z","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"doc_editorial_bundle":true,"doc_editorial_edges":{"hasreference":[2325,2943],"subject":[2557,2563,2612,2620]},"github_url":"https:\/\/github.com\/zotonic\/zotonic\/tree\/master\/doc\/cookbook\/frontend-share-variable.rst","is_authoritative":true,"is_dependent":false,"is_featured":false,"is_protected":false,"is_published":true,"is_unfindable":false,"language":["en"],"modified":"2026-10-07T11:13:51Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"name":"doc_cookbook_frontend_share_variable","pivot_geocode":null,"pivot_location_lat":null,"pivot_location_lng":null,"privacy":0,"publication_end":"9999-06-01T00:00:00Z","publication_start":"2022-02-15T10:01:19Z","slug":"share-a-value-between-template-components","summary":{"_type":"trans","tr":{"en":"Pass values explicitly and keep browser code in the supported script tag."}},"title":{"_type":"trans","tr":{"en":"Share a value between template components"}},"title_slug":{"_type":"trans","tr":{"en":"share-a-value-between-template-components"}},"tz":"UTC","uri":null,"version":36,"visible_for":0},"uri":"https:\/\/zotonic.com\/id\/1588","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1588"}},"status":"ok"}