mirror of
https://github.com/django-components/django-components.git
synced 2025-08-16 12:10:14 +00:00
604 lines
No EOL
166 KiB
HTML
604 lines
No EOL
166 KiB
HTML
<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="A way to create simple reusable template components in Django."><link href=https://emilstenstrom.github.io/django-components/latest/reference/django_components/components/dynamic/ rel=canonical><link href=../ rel=prev><link href=../../context/ rel=next><link rel=icon href=../../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.5.43"><title>dynamic - Django-Components</title><link rel=stylesheet href=../../../../assets/stylesheets/main.0253249f.min.css><link rel=stylesheet href=../../../../assets/stylesheets/palette.06af60db.min.css><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"><style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style><link rel=stylesheet href=../../../../assets/_markdown_exec_pyodide.css><link rel=stylesheet href=../../../../assets/_mkdocstrings.css><link rel=stylesheet href=../../../../css/timeago.css><script>__md_scope=new URL("../../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script><meta property=og:type content=website><meta property=og:title content="<code class=" doc-symbol doc-symbol-nav doc-symbol-module"></code> dynamic - Django-Components" > <meta property=og:description content="A way to create simple reusable template components in Django."><meta property=og:image content=https://emilstenstrom.github.io/django-components/latest/assets/images/social/reference/django_components/components/dynamic/index.png><meta property=og:image:type content=image/png><meta property=og:image:width content=1200><meta property=og:image:height content=630><meta content=https://emilstenstrom.github.io/django-components/latest/reference/django_components/components/dynamic/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="<code class=" doc-symbol doc-symbol-nav doc-symbol-module"></code> dynamic - Django-Components" > <meta name=twitter:description content="A way to create simple reusable template components in Django."><meta name=twitter:image content=https://emilstenstrom.github.io/django-components/latest/assets/images/social/reference/django_components/components/dynamic/index.png></head> <body dir=ltr data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo> <input class=md-toggle data-md-toggle=drawer type=checkbox id=__drawer autocomplete=off> <input class=md-toggle data-md-toggle=search type=checkbox id=__search autocomplete=off> <label class=md-overlay for=__drawer></label> <div data-md-component=skip> <a href=#django_components.components.dynamic class=md-skip> Skip to content </a> </div> <div data-md-component=announce> <aside class=md-banner> <div class="md-banner__inner md-grid md-typeset"> 🚨The documentation is still a work in progress. 🚨 </div> </aside> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> </div> <header class="md-header md-header--shadow" data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../../../.. title=Django-Components class="md-header__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> Django-Components </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> dynamic </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media=(prefers-color-scheme) data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_0> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12zm-9.15 3.96h2.3L12 9z"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to dark mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_2 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_0 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </label> <nav class=md-search__options aria-label=Search> <a href=javascript:void(0) class="md-search__icon md-icon" title=Share aria-label=Share data-clipboard data-clipboard-text data-md-component=search-share tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg> </a> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </button> </nav> <div class=md-search__suggest data-md-component=search-suggest></div> </form> <div class=md-search__output> <div class=md-search__scrollwrap tabindex=0 data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/EmilStenstrom/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> EmilStenstrom/django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../../../.. title=Django-Components class="md-nav__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> Django-Components </label> <div class=md-nav__source> <a href=https://github.com/EmilStenstrom/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> EmilStenstrom/django-components </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_1> <div class="md-nav__link md-nav__container"> <a href=../../../.. class="md-nav__link "> <span class=md-ellipsis> README </span> </a> <label class="md-nav__link " for=__nav_1 id=__nav_1_label tabindex> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_1_label aria-expanded=false> <label class=md-nav__title for=__nav_1> <span class="md-nav__icon md-icon"></span> README </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../../CHANGELOG/ class=md-nav__link> <span class=md-ellipsis> Changelog </span> </a> </li> <li class=md-nav__item> <a href=../../../../CODE_OF_CONDUCT/ class=md-nav__link> <span class=md-ellipsis> Code of Conduct </span> </a> </li> <li class=md-nav__item> <a href=../../../../license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2 checked> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex> <span class=md-ellipsis> Reference </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=true> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Reference </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2_1 checked> <label class=md-nav__link for=__nav_2_1 id=__nav_2_1_label tabindex=0> <span class=md-ellipsis> API Reference </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_1_label aria-expanded=true> <label class=md-nav__title for=__nav_2_1> <span class="md-nav__icon md-icon"></span> API Reference </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2_1_1 checked> <div class="md-nav__link md-nav__container"> <a href=../../ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components </span> </a> <label class="md-nav__link " for=__nav_2_1_1 id=__nav_2_1_1_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_2_1_1_label aria-expanded=true> <label class=md-nav__title for=__nav_2_1_1> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../app_settings/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> app_settings </span> </a> </li> <li class=md-nav__item> <a href=../../apps/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> apps </span> </a> </li> <li class=md-nav__item> <a href=../../attributes/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> attributes </span> </a> </li> <li class=md-nav__item> <a href=../../autodiscovery/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> autodiscovery </span> </a> </li> <li class=md-nav__item> <a href=../../component/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component </span> </a> </li> <li class=md-nav__item> <a href=../../component_media/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_media </span> </a> </li> <li class=md-nav__item> <a href=../../component_registry/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_registry </span> </a> </li> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2_1_1_9 checked> <div class="md-nav__link md-nav__container"> <a href=../ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> components </span> </a> <label class="md-nav__link " for=__nav_2_1_1_9 id=__nav_2_1_1_9_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_9_label aria-expanded=true> <label class=md-nav__title for=__nav_2_1_1_9> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> components </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <label class="md-nav__link md-nav__link--active" for=__toc> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> dynamic </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> dynamic </span> </a> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code> DynamicComponent </span> </a> <nav class=md-nav aria-label= DynamicComponent> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent--use-cases class=md-nav__link> <span class=md-ellipsis> Use cases </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent--component-name class=md-nav__link> <span class=md-ellipsis> Component name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.Media class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> Media </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.css class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> css </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.input class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> input </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.is_filled class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> is_filled </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.js class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> js </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.media class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> media </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.response_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> response_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.as_view class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> as_view </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.get_template class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> get_template </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.get_template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> get_template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.inject class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> inject </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.on_render_after class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> on_render_after </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.on_render_before class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> on_render_before </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.render_to_response class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> render_to_response </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../context/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> context </span> </a> </li> <li class=md-nav__item> <a href=../../dependencies/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> dependencies </span> </a> </li> <li class=md-nav__item> <a href=../../expression/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> expression </span> </a> </li> <li class=md-nav__item> <a href=../../finders/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> finders </span> </a> </li> <li class=md-nav__item> <a href=../../library/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> library </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_1_15> <div class="md-nav__link md-nav__container"> <a href=../../management/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> management </span> </a> <label class="md-nav__link " for=__nav_2_1_1_15 id=__nav_2_1_1_15_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_15_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_15> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> management </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_1_15_2> <div class="md-nav__link md-nav__container"> <a href=../../management/commands/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> commands </span> </a> <label class="md-nav__link " for=__nav_2_1_1_15_2 id=__nav_2_1_1_15_2_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=5 aria-labelledby=__nav_2_1_1_15_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_15_2> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> commands </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../management/commands/startcomponent/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> startcomponent </span> </a> </li> <li class=md-nav__item> <a href=../../management/commands/upgradecomponent/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> upgradecomponent </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../middleware/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> middleware </span> </a> </li> <li class=md-nav__item> <a href=../../node/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> node </span> </a> </li> <li class=md-nav__item> <a href=../../provide/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> provide </span> </a> </li> <li class=md-nav__item> <a href=../../slots/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> slots </span> </a> </li> <li class=md-nav__item> <a href=../../tag_formatter/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> tag_formatter </span> </a> </li> <li class=md-nav__item> <a href=../../template/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template </span> </a> </li> <li class=md-nav__item> <a href=../../template_loader/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template_loader </span> </a> </li> <li class=md-nav__item> <a href=../../template_parser/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template_parser </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_1_24> <div class="md-nav__link md-nav__container"> <a href=../../templatetags/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> templatetags </span> </a> <label class="md-nav__link " for=__nav_2_1_1_24 id=__nav_2_1_1_24_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_24_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_24> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> templatetags </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../templatetags/component_tags/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_tags </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../types/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> types </span> </a> </li> <li class=md-nav__item> <a href=../../urls/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> urls </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_1_27> <div class="md-nav__link md-nav__container"> <a href=../../util/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> util </span> </a> <label class="md-nav__link " for=__nav_2_1_1_27 id=__nav_2_1_1_27_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_27_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_27> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> util </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../util/cache/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> cache </span> </a> </li> <li class=md-nav__item> <a href=../../util/html/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> html </span> </a> </li> <li class=md-nav__item> <a href=../../util/loader/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> loader </span> </a> </li> <li class=md-nav__item> <a href=../../util/logger/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> logger </span> </a> </li> <li class=md-nav__item> <a href=../../util/misc/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> misc </span> </a> </li> <li class=md-nav__item> <a href=../../util/nanoid/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> nanoid </span> </a> </li> <li class=md-nav__item> <a href=../../util/tag_parser/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> tag_parser </span> </a> </li> <li class=md-nav__item> <a href=../../util/types/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> types </span> </a> </li> <li class=md-nav__item> <a href=../../util/validation/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> validation </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_2> <div class="md-nav__link md-nav__container"> <a href=../../../django_components_js/build/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components_js </span> </a> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_2_1_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_2> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components_js </label> <ul class=md-nav__list data-md-scrollfix> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_3> <div class="md-nav__link md-nav__container"> <a href=../../../docs/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> docs </span> </a> <label class="md-nav__link " for=__nav_2_1_3 id=__nav_2_1_3_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_2_1_3_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_3> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> docs </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_3_2> <div class="md-nav__link md-nav__container"> <a href=../../../docs/scripts/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> scripts </span> </a> <label class="md-nav__link " for=__nav_2_1_3_2 id=__nav_2_1_3_2_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_3_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_3_2> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> scripts </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../docs/scripts/reference/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> reference </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component=sidebar data-md-type=toc> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code> DynamicComponent </span> </a> <nav class=md-nav aria-label= DynamicComponent> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent--use-cases class=md-nav__link> <span class=md-ellipsis> Use cases </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent--component-name class=md-nav__link> <span class=md-ellipsis> Component name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.Media class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> Media </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.css class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> css </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.input class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> input </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.is_filled class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> is_filled </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.js class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> js </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.media class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> media </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.response_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> response_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code> template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.as_view class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> as_view </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.get_template class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> get_template </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.get_template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> get_template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.inject class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> inject </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.on_render_after class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> on_render_after </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.on_render_before class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> on_render_before </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.components.dynamic.DynamicComponent.render_to_response class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code> render_to_response </span> </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <a href=https://github.com/EmilStenstrom/django-components/edit/master/src/src/django_components/components/dynamic.py title="Edit this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg> </a> <a href=https://github.com/EmilStenstrom/django-components/raw/master/src/src/django_components/components/dynamic.py title="View source of this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg> </a> <div class="doc doc-object doc-module"> <h1 id=django_components.components.dynamic class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-module"></code> <span class="doc doc-object-name doc-module-name">dynamic</span> <a href=#django_components.components.dynamic class=headerlink title="Permanent link">¤</a></h1> <div class="doc doc-contents first"> <p><span class=doc-section-title>Modules:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.types href=../../#django_components.types>types</a></code></b> – <div class=doc-md-description> <p>Helper types for IDEs.</p> </div> </li> </ul> <p><span class=doc-section-title>Classes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent href=../../#django_components.components.dynamic.DynamicComponent>DynamicComponent</a></code></b> – <div class=doc-md-description> <p>This component is given a registered name or a reference to another component,</p> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-class"> <h2 id=django_components.components.dynamic.DynamicComponent class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">DynamicComponent</span> <a href=#django_components.components.dynamic.DynamicComponent class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>DynamicComponent</span><span class=p>(</span>
|
||
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>registered_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>component_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>outer_context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>registry</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=django_components.component_registry.ComponentRegistry href=../../#django_components.component_registry.ComponentRegistry>ComponentRegistry</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=p>)</span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p class="doc doc-class-bases"> Bases: <code><a class="autorefs autorefs-internal" title=django_components.Component href=../../#django_components.Component>Component</a></code></p> <p>This component is given a registered name or a reference to another component, and behaves as if the other component was in its place.</p> <p>The args, kwargs, and slot fills are all passed down to the underlying component.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>is</code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a> | <a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=django_components.Component href=../../#django_components.Component>Component</a>]</code>) – <div class=doc-md-description> <p>Component that should be rendered. Either a registered name of a component, or a <a href=../api#django_components.Component>Component</a> class directly. Required.</p> </div> </li> <li class="doc-section-item field-body"> <b><code>registry</code></b> (<code><a class="autorefs autorefs-internal" title=django_components.ComponentRegistry href=../../#django_components.ComponentRegistry>ComponentRegistry</a></code>, default: <code>None</code> ) – <div class=doc-md-description> <p>Specify the <a href=../api#django_components.ComponentRegistry>registry</a> to search for the registered name. If omitted, all registries are searched until the first match.</p> </div> </li> <li class="doc-section-item field-body"> <b><code>*args</code></b> – <div class=doc-md-description> <p>Additional data passed to the component.</p> </div> </li> <li class="doc-section-item field-body"> <b><code>**kwargs</code></b> – <div class=doc-md-description> <p>Additional data passed to the component.</p> </div> </li> </ul> <p><strong>Slots:</strong></p> <ul> <li>Any slots, depending on the actual component.</li> </ul> <p><strong>Examples:</strong></p> <p>Django <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"dynamic"</span> <span class=k>is</span><span class=o>=</span><span class=nv>table_comp</span> <span class=nv>data</span><span class=o>=</span><span class=nv>table_data</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>table_headers</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"pagination"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"pagination"</span> <span class=o>/</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div></p> <p>Python <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>DynamicComponent</span>
|
||
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
|
||
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=n>DynamicComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
||
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
|
||
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=s2>"is"</span><span class=p>:</span> <span class=n>table_comp</span><span class=p>,</span>
|
||
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=s2>"data"</span><span class=p>:</span> <span class=n>table_data</span><span class=p>,</span>
|
||
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=s2>"headers"</span><span class=p>:</span> <span class=n>table_headers</span><span class=p>,</span>
|
||
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=p>},</span>
|
||
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
||
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=s2>"pagination"</span><span class=p>:</span> <span class=n>PaginationComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
||
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> <span class=n>render_dependencies</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span>
|
||
<a id=__codelineno-1-12 name=__codelineno-1-12 href=#__codelineno-1-12></a> <span class=p>),</span>
|
||
<a id=__codelineno-1-13 name=__codelineno-1-13 href=#__codelineno-1-13></a> <span class=p>},</span>
|
||
<a id=__codelineno-1-14 name=__codelineno-1-14 href=#__codelineno-1-14></a><span class=p>)</span>
|
||
</code></pre></div></p> <h3 id=django_components.components.dynamic.DynamicComponent--use-cases>Use cases<a class=headerlink href=#django_components.components.dynamic.DynamicComponent--use-cases title="Permanent link">¤</a></h3> <p>Dynamic components are suitable if you are writing something like a form component. You may design it such that users give you a list of input types, and you render components depending on the input types.</p> <p>While you could handle this with a series of if / else statements, that's not an extensible approach. Instead, you can use the dynamic component in place of normal components.</p> <h3 id=django_components.components.dynamic.DynamicComponent--component-name>Component name<a class=headerlink href=#django_components.components.dynamic.DynamicComponent--component-name title="Permanent link">¤</a></h3> <p>By default, the dynamic component is registered under the name <code>"dynamic"</code>. In case of a conflict, you can set the <a href=../settings#django_components.app_settings.ComponentsSettings.dynamic_component_name><code>COMPONENTS.dynamic_component_name</code></a> setting to change the name used for the dynamic components.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=c1># settings.py</span>
|
||
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
|
||
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=n>dynamic_component_name</span><span class=o>=</span><span class=s2>"my_dynamic"</span><span class=p>,</span>
|
||
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=p>)</span>
|
||
</code></pre></div> <p>After which you will be able to use the dynamic component with the new name: <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_dynamic"</span> <span class=k>is</span><span class=o>=</span><span class=nv>table_comp</span> <span class=nv>data</span><span class=o>=</span><span class=nv>table_data</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>table_headers</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"pagination"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"pagination"</span> <span class=o>/</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div></p> <p><span class=doc-section-title>Methods:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.as_view href=../../#django_components.components.dynamic.DynamicComponent.as_view>as_view</a></code></b> – <div class=doc-md-description> <p>Shortcut for calling <code>Component.View.as_view</code> and passing component instance to it.</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.get_template href=../../#django_components.components.dynamic.DynamicComponent.get_template>get_template</a></code></b> – <div class=doc-md-description> <p>Inlined Django template associated with this component. Can be a plain string or a Template instance.</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.get_template_name href=../../#django_components.components.dynamic.DynamicComponent.get_template_name>get_template_name</a></code></b> – <div class=doc-md-description> <p>Filepath to the Django template associated with this component.</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.inject href=../../#django_components.components.dynamic.DynamicComponent.inject>inject</a></code></b> – <div class=doc-md-description> <p>Use this method to retrieve the data that was passed to a <code>{% provide %}</code> tag</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.on_render_after href=../../#django_components.components.dynamic.DynamicComponent.on_render_after>on_render_after</a></code></b> – <div class=doc-md-description> <p>Hook that runs just after the component's template was rendered.</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.on_render_before href=../../#django_components.components.dynamic.DynamicComponent.on_render_before>on_render_before</a></code></b> – <div class=doc-md-description> <p>Hook that runs just before the component's template is rendered.</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.render href=../../#django_components.components.dynamic.DynamicComponent.render>render</a></code></b> – <div class=doc-md-description> <p>Render the component into a string.</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.render_to_response href=../../#django_components.components.dynamic.DynamicComponent.render_to_response>render_to_response</a></code></b> – <div class=doc-md-description> <p>Render the component and wrap the content in the response class.</p> </div> </li> </ul> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.Media href=../../#django_components.components.dynamic.DynamicComponent.Media>Media</a></code></b> – <div class=doc-md-description> <p>Defines JS and CSS media files associated with this component.</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.css href=../../#django_components.components.dynamic.DynamicComponent.css>css</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) – <div class=doc-md-description> <p>Inlined CSS associated with this component.</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.input href=../../#django_components.components.dynamic.DynamicComponent.input>input</a></code></b> (<code><span title=django_components.component.RenderInput>RenderInput</span>[<span title=django_components.component.ArgsType>ArgsType</span>, <span title=django_components.component.KwargsType>KwargsType</span>, <span title=django_components.component.SlotsType>SlotsType</span>]</code>) – <div class=doc-md-description> <p>Input holds the data (like arg, kwargs, slots) that were passsed to</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.is_filled href=../../#django_components.components.dynamic.DynamicComponent.is_filled>is_filled</a></code></b> (<code><a class="autorefs autorefs-internal" title=django_components.slots.SlotIsFilled href=../../#django_components.slots.SlotIsFilled>SlotIsFilled</a></code>) – <div class=doc-md-description> <p>Dictionary describing which slots have or have not been filled.</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.js href=../../#django_components.components.dynamic.DynamicComponent.js>js</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) – <div class=doc-md-description> <p>Inlined JS associated with this component.</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.media href=../../#django_components.components.dynamic.DynamicComponent.media>media</a></code></b> (<code><a class="autorefs autorefs-internal" title=django_components.component.Component.Media href=../../#django_components.component.Component.Media>Media</a></code>) – <div class=doc-md-description> <p>Normalized definition of JS and CSS media files associated with this component.</p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.response_class href=../../#django_components.components.dynamic.DynamicComponent.response_class>response_class</a></code></b> – <div class=doc-md-description> <p>This allows to configure what class is used to generate response from <code>render_to_response</code></p> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.components.dynamic.DynamicComponent.template_name href=../../#django_components.components.dynamic.DynamicComponent.template_name>template_name</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) – <div class=doc-md-description> <p>Filepath to the Django template associated with this component.</p> </div> </li> </ul> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-286>286</a></span>
|
||
<span class=normal><a href=#__codelineno-0-287>287</a></span>
|
||
<span class=normal><a href=#__codelineno-0-288>288</a></span>
|
||
<span class=normal><a href=#__codelineno-0-289>289</a></span>
|
||
<span class=normal><a href=#__codelineno-0-290>290</a></span>
|
||
<span class=normal><a href=#__codelineno-0-291>291</a></span>
|
||
<span class=normal><a href=#__codelineno-0-292>292</a></span>
|
||
<span class=normal><a href=#__codelineno-0-293>293</a></span>
|
||
<span class=normal><a href=#__codelineno-0-294>294</a></span>
|
||
<span class=normal><a href=#__codelineno-0-295>295</a></span>
|
||
<span class=normal><a href=#__codelineno-0-296>296</a></span>
|
||
<span class=normal><a href=#__codelineno-0-297>297</a></span>
|
||
<span class=normal><a href=#__codelineno-0-298>298</a></span>
|
||
<span class=normal><a href=#__codelineno-0-299>299</a></span>
|
||
<span class=normal><a href=#__codelineno-0-300>300</a></span>
|
||
<span class=normal><a href=#__codelineno-0-301>301</a></span>
|
||
<span class=normal><a href=#__codelineno-0-302>302</a></span>
|
||
<span class=normal><a href=#__codelineno-0-303>303</a></span>
|
||
<span class=normal><a href=#__codelineno-0-304>304</a></span>
|
||
<span class=normal><a href=#__codelineno-0-305>305</a></span>
|
||
<span class=normal><a href=#__codelineno-0-306>306</a></span>
|
||
<span class=normal><a href=#__codelineno-0-307>307</a></span>
|
||
<span class=normal><a href=#__codelineno-0-308>308</a></span>
|
||
<span class=normal><a href=#__codelineno-0-309>309</a></span>
|
||
<span class=normal><a href=#__codelineno-0-310>310</a></span>
|
||
<span class=normal><a href=#__codelineno-0-311>311</a></span>
|
||
<span class=normal><a href=#__codelineno-0-312>312</a></span>
|
||
<span class=normal><a href=#__codelineno-0-313>313</a></span>
|
||
<span class=normal><a href=#__codelineno-0-314>314</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-286 name=__codelineno-0-286></a><span class=k>def</span> <span class=fm>__init__</span><span class=p>(</span>
|
||
<a id=__codelineno-0-287 name=__codelineno-0-287></a> <span class=bp>self</span><span class=p>,</span>
|
||
<a id=__codelineno-0-288 name=__codelineno-0-288></a> <span class=n>registered_name</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-289 name=__codelineno-0-289></a> <span class=n>component_id</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-290 name=__codelineno-0-290></a> <span class=n>outer_context</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Context</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-291 name=__codelineno-0-291></a> <span class=n>registry</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>ComponentRegistry</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=c1># noqa F811</span>
|
||
<a id=__codelineno-0-292 name=__codelineno-0-292></a><span class=p>):</span>
|
||
<a id=__codelineno-0-293 name=__codelineno-0-293></a> <span class=c1># When user first instantiates the component class before calling</span>
|
||
<a id=__codelineno-0-294 name=__codelineno-0-294></a> <span class=c1># `render` or `render_to_response`, then we want to allow the render</span>
|
||
<a id=__codelineno-0-295 name=__codelineno-0-295></a> <span class=c1># function to make use of the instantiated object.</span>
|
||
<a id=__codelineno-0-296 name=__codelineno-0-296></a> <span class=c1>#</span>
|
||
<a id=__codelineno-0-297 name=__codelineno-0-297></a> <span class=c1># So while `MyComp.render()` creates a new instance of MyComp internally,</span>
|
||
<a id=__codelineno-0-298 name=__codelineno-0-298></a> <span class=c1># if we do `MyComp(registered_name="abc").render()`, then we use the</span>
|
||
<a id=__codelineno-0-299 name=__codelineno-0-299></a> <span class=c1># already-instantiated object.</span>
|
||
<a id=__codelineno-0-300 name=__codelineno-0-300></a> <span class=c1>#</span>
|
||
<a id=__codelineno-0-301 name=__codelineno-0-301></a> <span class=c1># To achieve that, we want to re-assign the class methods as instance methods.</span>
|
||
<a id=__codelineno-0-302 name=__codelineno-0-302></a> <span class=c1># For that we have to "unwrap" the class methods via __func__.</span>
|
||
<a id=__codelineno-0-303 name=__codelineno-0-303></a> <span class=c1># See https://stackoverflow.com/a/76706399/9788634</span>
|
||
<a id=__codelineno-0-304 name=__codelineno-0-304></a> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span> <span class=o>=</span> <span class=n>types</span><span class=o>.</span><span class=n>MethodType</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=vm>__class__</span><span class=o>.</span><span class=n>render_to_response</span><span class=o>.</span><span class=vm>__func__</span><span class=p>,</span> <span class=bp>self</span><span class=p>)</span> <span class=c1># type: ignore</span>
|
||
<a id=__codelineno-0-305 name=__codelineno-0-305></a> <span class=bp>self</span><span class=o>.</span><span class=n>render</span> <span class=o>=</span> <span class=n>types</span><span class=o>.</span><span class=n>MethodType</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=vm>__class__</span><span class=o>.</span><span class=n>render</span><span class=o>.</span><span class=vm>__func__</span><span class=p>,</span> <span class=bp>self</span><span class=p>)</span> <span class=c1># type: ignore</span>
|
||
<a id=__codelineno-0-306 name=__codelineno-0-306></a> <span class=bp>self</span><span class=o>.</span><span class=n>as_view</span> <span class=o>=</span> <span class=n>types</span><span class=o>.</span><span class=n>MethodType</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=vm>__class__</span><span class=o>.</span><span class=n>as_view</span><span class=o>.</span><span class=vm>__func__</span><span class=p>,</span> <span class=bp>self</span><span class=p>)</span> <span class=c1># type: ignore</span>
|
||
<a id=__codelineno-0-307 name=__codelineno-0-307></a>
|
||
<a id=__codelineno-0-308 name=__codelineno-0-308></a> <span class=bp>self</span><span class=o>.</span><span class=n>registered_name</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=n>registered_name</span>
|
||
<a id=__codelineno-0-309 name=__codelineno-0-309></a> <span class=bp>self</span><span class=o>.</span><span class=n>outer_context</span><span class=p>:</span> <span class=n>Context</span> <span class=o>=</span> <span class=n>outer_context</span> <span class=ow>or</span> <span class=n>Context</span><span class=p>()</span>
|
||
<a id=__codelineno-0-310 name=__codelineno-0-310></a> <span class=bp>self</span><span class=o>.</span><span class=n>component_id</span> <span class=o>=</span> <span class=n>component_id</span> <span class=ow>or</span> <span class=n>gen_id</span><span class=p>()</span>
|
||
<a id=__codelineno-0-311 name=__codelineno-0-311></a> <span class=bp>self</span><span class=o>.</span><span class=n>registry</span> <span class=o>=</span> <span class=n>registry</span> <span class=ow>or</span> <span class=n>registry_</span>
|
||
<a id=__codelineno-0-312 name=__codelineno-0-312></a> <span class=bp>self</span><span class=o>.</span><span class=n>_render_stack</span><span class=p>:</span> <span class=n>Deque</span><span class=p>[</span><span class=n>RenderStackItem</span><span class=p>[</span><span class=n>ArgsType</span><span class=p>,</span> <span class=n>KwargsType</span><span class=p>,</span> <span class=n>SlotsType</span><span class=p>]]</span> <span class=o>=</span> <span class=n>deque</span><span class=p>()</span>
|
||
<a id=__codelineno-0-313 name=__codelineno-0-313></a> <span class=c1># None == uninitialized, False == No types, Tuple == types</span>
|
||
<a id=__codelineno-0-314 name=__codelineno-0-314></a> <span class=bp>self</span><span class=o>.</span><span class=n>_types</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Union</span><span class=p>[</span><span class=n>Tuple</span><span class=p>[</span><span class=n>Any</span><span class=p>,</span> <span class=n>Any</span><span class=p>,</span> <span class=n>Any</span><span class=p>,</span> <span class=n>Any</span><span class=p>,</span> <span class=n>Any</span><span class=p>,</span> <span class=n>Any</span><span class=p>],</span> <span class=n>Literal</span><span class=p>[</span><span class=kc>False</span><span class=p>]]]</span> <span class=o>=</span> <span class=kc>None</span>
|
||
</code></pre></div></td></tr></table></div> </details> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.components.dynamic.DynamicComponent.Media class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">Media</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.components.dynamic.DynamicComponent.Media class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>Media</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-internal" title=django_components.component_media.ComponentMediaInput href=../../#django_components.component_media.ComponentMediaInput>ComponentMediaInput</a></span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Defines JS and CSS media files associated with this component.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.components.dynamic.DynamicComponent.css class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">css</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.components.dynamic.DynamicComponent.css class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>css</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Inlined CSS associated with this component.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.components.dynamic.DynamicComponent.input class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">input</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.components.dynamic.DynamicComponent.input class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nb>input</span><span class=p>:</span> <span class=n><span title=django_components.component.RenderInput>RenderInput</span></span><span class=p>[</span><span class=n><span title=django_components.component.ArgsType>ArgsType</span></span><span class=p>,</span> <span class=n><span title=django_components.component.KwargsType>KwargsType</span></span><span class=p>,</span> <span class=n><span title=django_components.component.SlotsType>SlotsType</span></span><span class=p>]</span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Input holds the data (like arg, kwargs, slots) that were passsed to the current execution of the <code>render</code> method.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.components.dynamic.DynamicComponent.is_filled class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">is_filled</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.components.dynamic.DynamicComponent.is_filled class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>is_filled</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=django_components.slots.SlotIsFilled href=../../#django_components.slots.SlotIsFilled>SlotIsFilled</a></span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Dictionary describing which slots have or have not been filled.</p> <p>This attribute is available for use only within the template as <code>{{ component_vars.is_filled.slot_name }}</code>, and within <code>on_render_before</code> and <code>on_render_after</code> hooks.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.components.dynamic.DynamicComponent.js class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">js</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.components.dynamic.DynamicComponent.js class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>js</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Inlined JS associated with this component.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.components.dynamic.DynamicComponent.media class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">media</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.components.dynamic.DynamicComponent.media class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>media</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=django_components.component.Component.Media href=../../#django_components.component.Component.Media>Media</a></span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Normalized definition of JS and CSS media files associated with this component.</p> <p>NOTE: This field is generated from Component.Media class.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.components.dynamic.DynamicComponent.response_class class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">response_class</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.components.dynamic.DynamicComponent.response_class class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>response_class</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.0/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>This allows to configure what class is used to generate response from <code>render_to_response</code></p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.components.dynamic.DynamicComponent.template_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.components.dynamic.DynamicComponent.template_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Filepath to the Django template associated with this component.</p> <p>The filepath must be relative to either the file where the component class was defined, or one of the roots of <code>STATIFILES_DIRS</code>.</p> <p>Only one of <code>template_name</code>, <code>get_template_name</code>, <code>template</code> or <code>get_template</code> must be defined.</p> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.components.dynamic.DynamicComponent.as_view class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">as_view</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.components.dynamic.DynamicComponent.as_view class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>as_view</span><span class=p>(</span><span class=o>**</span><span class=n>initkwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-></span> <span class=n><span title=django_components.component.ViewFn>ViewFn</span></span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Shortcut for calling <code>Component.View.as_view</code> and passing component instance to it.</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-459>459</a></span>
|
||
<span class=normal><a href=#__codelineno-0-460>460</a></span>
|
||
<span class=normal><a href=#__codelineno-0-461>461</a></span>
|
||
<span class=normal><a href=#__codelineno-0-462>462</a></span>
|
||
<span class=normal><a href=#__codelineno-0-463>463</a></span>
|
||
<span class=normal><a href=#__codelineno-0-464>464</a></span>
|
||
<span class=normal><a href=#__codelineno-0-465>465</a></span>
|
||
<span class=normal><a href=#__codelineno-0-466>466</a></span>
|
||
<span class=normal><a href=#__codelineno-0-467>467</a></span>
|
||
<span class=normal><a href=#__codelineno-0-468>468</a></span>
|
||
<span class=normal><a href=#__codelineno-0-469>469</a></span>
|
||
<span class=normal><a href=#__codelineno-0-470>470</a></span>
|
||
<span class=normal><a href=#__codelineno-0-471>471</a></span>
|
||
<span class=normal><a href=#__codelineno-0-472>472</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-459 name=__codelineno-0-459></a><span class=nd>@classmethod</span>
|
||
<a id=__codelineno-0-460 name=__codelineno-0-460></a><span class=k>def</span> <span class=nf>as_view</span><span class=p>(</span><span class=bp>cls</span><span class=p>,</span> <span class=o>**</span><span class=n>initkwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>)</span> <span class=o>-></span> <span class=n>ViewFn</span><span class=p>:</span>
|
||
<a id=__codelineno-0-461 name=__codelineno-0-461></a><span class=w> </span><span class=sd>"""</span>
|
||
<a id=__codelineno-0-462 name=__codelineno-0-462></a><span class=sd> Shortcut for calling `Component.View.as_view` and passing component instance to it.</span>
|
||
<a id=__codelineno-0-463 name=__codelineno-0-463></a><span class=sd> """</span>
|
||
<a id=__codelineno-0-464 name=__codelineno-0-464></a> <span class=c1># This method may be called as class method or as instance method.</span>
|
||
<a id=__codelineno-0-465 name=__codelineno-0-465></a> <span class=c1># If called as class method, create a new instance.</span>
|
||
<a id=__codelineno-0-466 name=__codelineno-0-466></a> <span class=k>if</span> <span class=nb>isinstance</span><span class=p>(</span><span class=bp>cls</span><span class=p>,</span> <span class=n>Component</span><span class=p>):</span>
|
||
<a id=__codelineno-0-467 name=__codelineno-0-467></a> <span class=n>comp</span><span class=p>:</span> <span class=n>Component</span> <span class=o>=</span> <span class=bp>cls</span>
|
||
<a id=__codelineno-0-468 name=__codelineno-0-468></a> <span class=k>else</span><span class=p>:</span>
|
||
<a id=__codelineno-0-469 name=__codelineno-0-469></a> <span class=n>comp</span> <span class=o>=</span> <span class=bp>cls</span><span class=p>()</span>
|
||
<a id=__codelineno-0-470 name=__codelineno-0-470></a>
|
||
<a id=__codelineno-0-471 name=__codelineno-0-471></a> <span class=c1># Allow the View class to access this component via `self.component`</span>
|
||
<a id=__codelineno-0-472 name=__codelineno-0-472></a> <span class=k>return</span> <span class=n>comp</span><span class=o>.</span><span class=n>View</span><span class=o>.</span><span class=n>as_view</span><span class=p>(</span><span class=o>**</span><span class=n>initkwargs</span><span class=p>,</span> <span class=n>component</span><span class=o>=</span><span class=n>comp</span><span class=p>)</span>
|
||
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.components.dynamic.DynamicComponent.get_template class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get_template</span> <a href=#django_components.components.dynamic.DynamicComponent.get_template class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_template</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>)</span> <span class=o>-></span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><span title=django.template.base.Template>Template</span></span><span class=p>]]</span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Inlined Django template associated with this component. Can be a plain string or a Template instance.</p> <p>Only one of <code>template_name</code>, <code>get_template_name</code>, <code>template</code> or <code>get_template</code> must be defined.</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-226>226</a></span>
|
||
<span class=normal><a href=#__codelineno-0-227>227</a></span>
|
||
<span class=normal><a href=#__codelineno-0-228>228</a></span>
|
||
<span class=normal><a href=#__codelineno-0-229>229</a></span>
|
||
<span class=normal><a href=#__codelineno-0-230>230</a></span>
|
||
<span class=normal><a href=#__codelineno-0-231>231</a></span>
|
||
<span class=normal><a href=#__codelineno-0-232>232</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-226 name=__codelineno-0-226></a><span class=k>def</span> <span class=nf>get_template</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>)</span> <span class=o>-></span> <span class=n>Optional</span><span class=p>[</span><span class=n>Union</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Template</span><span class=p>]]:</span>
|
||
<a id=__codelineno-0-227 name=__codelineno-0-227></a><span class=w> </span><span class=sd>"""</span>
|
||
<a id=__codelineno-0-228 name=__codelineno-0-228></a><span class=sd> Inlined Django template associated with this component. Can be a plain string or a Template instance.</span>
|
||
<a id=__codelineno-0-229 name=__codelineno-0-229></a>
|
||
<a id=__codelineno-0-230 name=__codelineno-0-230></a><span class=sd> Only one of `template_name`, `get_template_name`, `template` or `get_template` must be defined.</span>
|
||
<a id=__codelineno-0-231 name=__codelineno-0-231></a><span class=sd> """</span>
|
||
<a id=__codelineno-0-232 name=__codelineno-0-232></a> <span class=k>return</span> <span class=kc>None</span>
|
||
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.components.dynamic.DynamicComponent.get_template_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get_template_name</span> <a href=#django_components.components.dynamic.DynamicComponent.get_template_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_template_name</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>)</span> <span class=o>-></span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Filepath to the Django template associated with this component.</p> <p>The filepath must be relative to either the file where the component class was defined, or one of the roots of <code>STATIFILES_DIRS</code>.</p> <p>Only one of <code>template_name</code>, <code>get_template_name</code>, <code>template</code> or <code>get_template</code> must be defined.</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-208>208</a></span>
|
||
<span class=normal><a href=#__codelineno-0-209>209</a></span>
|
||
<span class=normal><a href=#__codelineno-0-210>210</a></span>
|
||
<span class=normal><a href=#__codelineno-0-211>211</a></span>
|
||
<span class=normal><a href=#__codelineno-0-212>212</a></span>
|
||
<span class=normal><a href=#__codelineno-0-213>213</a></span>
|
||
<span class=normal><a href=#__codelineno-0-214>214</a></span>
|
||
<span class=normal><a href=#__codelineno-0-215>215</a></span>
|
||
<span class=normal><a href=#__codelineno-0-216>216</a></span>
|
||
<span class=normal><a href=#__codelineno-0-217>217</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-208 name=__codelineno-0-208></a><span class=k>def</span> <span class=nf>get_template_name</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>)</span> <span class=o>-></span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]:</span>
|
||
<a id=__codelineno-0-209 name=__codelineno-0-209></a><span class=w> </span><span class=sd>"""</span>
|
||
<a id=__codelineno-0-210 name=__codelineno-0-210></a><span class=sd> Filepath to the Django template associated with this component.</span>
|
||
<a id=__codelineno-0-211 name=__codelineno-0-211></a>
|
||
<a id=__codelineno-0-212 name=__codelineno-0-212></a><span class=sd> The filepath must be relative to either the file where the component class was defined,</span>
|
||
<a id=__codelineno-0-213 name=__codelineno-0-213></a><span class=sd> or one of the roots of `STATIFILES_DIRS`.</span>
|
||
<a id=__codelineno-0-214 name=__codelineno-0-214></a>
|
||
<a id=__codelineno-0-215 name=__codelineno-0-215></a><span class=sd> Only one of `template_name`, `get_template_name`, `template` or `get_template` must be defined.</span>
|
||
<a id=__codelineno-0-216 name=__codelineno-0-216></a><span class=sd> """</span>
|
||
<a id=__codelineno-0-217 name=__codelineno-0-217></a> <span class=k>return</span> <span class=kc>None</span>
|
||
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.components.dynamic.DynamicComponent.inject class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">inject</span> <a href=#django_components.components.dynamic.DynamicComponent.inject class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>inject</span><span class=p>(</span><span class=n>key</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n>default</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-></span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Use this method to retrieve the data that was passed to a <code>{% provide %}</code> tag with the corresponding key.</p> <p>To retrieve the data, <code>inject()</code> must be called inside a component that's inside the <code>{% provide %}</code> tag.</p> <p>You may also pass a default that will be used if the <code>provide</code> tag with given key was NOT found.</p> <p>This method mut be used inside the <code>get_context_data()</code> method and raises an error if called elsewhere.</p> <p>Example:</p> <p>Given this template: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>provide</span> <span class=s2>"provider"</span> <span class=nv>hello</span><span class=o>=</span><span class=s2>"world"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_comp"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=cp>{%</span> <span class=k>endprovide</span> <span class=cp>%}</span>
|
||
</code></pre></div></p> <p>And given this definition of "my_comp" component: <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
|
||
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
|
||
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"my_comp"</span><span class=p>)</span>
|
||
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=k>class</span> <span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"hi {{ data.hello }}!"</span>
|
||
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
||
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=n>data</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>"provider"</span><span class=p>)</span>
|
||
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=k>return</span> <span class=p>{</span><span class=s2>"data"</span><span class=p>:</span> <span class=n>data</span><span class=p>}</span>
|
||
</code></pre></div></p> <p>This renders into: <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a>hi world!
|
||
</code></pre></div></p> <p>As the <code>{{ data.hello }}</code> is taken from the "provider".</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-409>409</a></span>
|
||
<span class=normal><a href=#__codelineno-0-410>410</a></span>
|
||
<span class=normal><a href=#__codelineno-0-411>411</a></span>
|
||
<span class=normal><a href=#__codelineno-0-412>412</a></span>
|
||
<span class=normal><a href=#__codelineno-0-413>413</a></span>
|
||
<span class=normal><a href=#__codelineno-0-414>414</a></span>
|
||
<span class=normal><a href=#__codelineno-0-415>415</a></span>
|
||
<span class=normal><a href=#__codelineno-0-416>416</a></span>
|
||
<span class=normal><a href=#__codelineno-0-417>417</a></span>
|
||
<span class=normal><a href=#__codelineno-0-418>418</a></span>
|
||
<span class=normal><a href=#__codelineno-0-419>419</a></span>
|
||
<span class=normal><a href=#__codelineno-0-420>420</a></span>
|
||
<span class=normal><a href=#__codelineno-0-421>421</a></span>
|
||
<span class=normal><a href=#__codelineno-0-422>422</a></span>
|
||
<span class=normal><a href=#__codelineno-0-423>423</a></span>
|
||
<span class=normal><a href=#__codelineno-0-424>424</a></span>
|
||
<span class=normal><a href=#__codelineno-0-425>425</a></span>
|
||
<span class=normal><a href=#__codelineno-0-426>426</a></span>
|
||
<span class=normal><a href=#__codelineno-0-427>427</a></span>
|
||
<span class=normal><a href=#__codelineno-0-428>428</a></span>
|
||
<span class=normal><a href=#__codelineno-0-429>429</a></span>
|
||
<span class=normal><a href=#__codelineno-0-430>430</a></span>
|
||
<span class=normal><a href=#__codelineno-0-431>431</a></span>
|
||
<span class=normal><a href=#__codelineno-0-432>432</a></span>
|
||
<span class=normal><a href=#__codelineno-0-433>433</a></span>
|
||
<span class=normal><a href=#__codelineno-0-434>434</a></span>
|
||
<span class=normal><a href=#__codelineno-0-435>435</a></span>
|
||
<span class=normal><a href=#__codelineno-0-436>436</a></span>
|
||
<span class=normal><a href=#__codelineno-0-437>437</a></span>
|
||
<span class=normal><a href=#__codelineno-0-438>438</a></span>
|
||
<span class=normal><a href=#__codelineno-0-439>439</a></span>
|
||
<span class=normal><a href=#__codelineno-0-440>440</a></span>
|
||
<span class=normal><a href=#__codelineno-0-441>441</a></span>
|
||
<span class=normal><a href=#__codelineno-0-442>442</a></span>
|
||
<span class=normal><a href=#__codelineno-0-443>443</a></span>
|
||
<span class=normal><a href=#__codelineno-0-444>444</a></span>
|
||
<span class=normal><a href=#__codelineno-0-445>445</a></span>
|
||
<span class=normal><a href=#__codelineno-0-446>446</a></span>
|
||
<span class=normal><a href=#__codelineno-0-447>447</a></span>
|
||
<span class=normal><a href=#__codelineno-0-448>448</a></span>
|
||
<span class=normal><a href=#__codelineno-0-449>449</a></span>
|
||
<span class=normal><a href=#__codelineno-0-450>450</a></span>
|
||
<span class=normal><a href=#__codelineno-0-451>451</a></span>
|
||
<span class=normal><a href=#__codelineno-0-452>452</a></span>
|
||
<span class=normal><a href=#__codelineno-0-453>453</a></span>
|
||
<span class=normal><a href=#__codelineno-0-454>454</a></span>
|
||
<span class=normal><a href=#__codelineno-0-455>455</a></span>
|
||
<span class=normal><a href=#__codelineno-0-456>456</a></span>
|
||
<span class=normal><a href=#__codelineno-0-457>457</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-409 name=__codelineno-0-409></a><span class=k>def</span> <span class=nf>inject</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>key</span><span class=p>:</span> <span class=nb>str</span><span class=p>,</span> <span class=n>default</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Any</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-></span> <span class=n>Any</span><span class=p>:</span>
|
||
<a id=__codelineno-0-410 name=__codelineno-0-410></a><span class=w> </span><span class=sd>"""</span>
|
||
<a id=__codelineno-0-411 name=__codelineno-0-411></a><span class=sd> Use this method to retrieve the data that was passed to a `{% provide %}` tag</span>
|
||
<a id=__codelineno-0-412 name=__codelineno-0-412></a><span class=sd> with the corresponding key.</span>
|
||
<a id=__codelineno-0-413 name=__codelineno-0-413></a>
|
||
<a id=__codelineno-0-414 name=__codelineno-0-414></a><span class=sd> To retrieve the data, `inject()` must be called inside a component that's</span>
|
||
<a id=__codelineno-0-415 name=__codelineno-0-415></a><span class=sd> inside the `{% provide %}` tag.</span>
|
||
<a id=__codelineno-0-416 name=__codelineno-0-416></a>
|
||
<a id=__codelineno-0-417 name=__codelineno-0-417></a><span class=sd> You may also pass a default that will be used if the `provide` tag with given</span>
|
||
<a id=__codelineno-0-418 name=__codelineno-0-418></a><span class=sd> key was NOT found.</span>
|
||
<a id=__codelineno-0-419 name=__codelineno-0-419></a>
|
||
<a id=__codelineno-0-420 name=__codelineno-0-420></a><span class=sd> This method mut be used inside the `get_context_data()` method and raises</span>
|
||
<a id=__codelineno-0-421 name=__codelineno-0-421></a><span class=sd> an error if called elsewhere.</span>
|
||
<a id=__codelineno-0-422 name=__codelineno-0-422></a>
|
||
<a id=__codelineno-0-423 name=__codelineno-0-423></a><span class=sd> Example:</span>
|
||
<a id=__codelineno-0-424 name=__codelineno-0-424></a>
|
||
<a id=__codelineno-0-425 name=__codelineno-0-425></a><span class=sd> Given this template:</span>
|
||
<a id=__codelineno-0-426 name=__codelineno-0-426></a><span class=sd> ```django</span>
|
||
<a id=__codelineno-0-427 name=__codelineno-0-427></a><span class=sd> {% provide "provider" hello="world" %}</span>
|
||
<a id=__codelineno-0-428 name=__codelineno-0-428></a><span class=sd> {% component "my_comp" %}</span>
|
||
<a id=__codelineno-0-429 name=__codelineno-0-429></a><span class=sd> {% endcomponent %}</span>
|
||
<a id=__codelineno-0-430 name=__codelineno-0-430></a><span class=sd> {% endprovide %}</span>
|
||
<a id=__codelineno-0-431 name=__codelineno-0-431></a><span class=sd> ```</span>
|
||
<a id=__codelineno-0-432 name=__codelineno-0-432></a>
|
||
<a id=__codelineno-0-433 name=__codelineno-0-433></a><span class=sd> And given this definition of "my_comp" component:</span>
|
||
<a id=__codelineno-0-434 name=__codelineno-0-434></a><span class=sd> ```py</span>
|
||
<a id=__codelineno-0-435 name=__codelineno-0-435></a><span class=sd> from django_components import Component, register</span>
|
||
<a id=__codelineno-0-436 name=__codelineno-0-436></a>
|
||
<a id=__codelineno-0-437 name=__codelineno-0-437></a><span class=sd> @register("my_comp")</span>
|
||
<a id=__codelineno-0-438 name=__codelineno-0-438></a><span class=sd> class MyComp(Component):</span>
|
||
<a id=__codelineno-0-439 name=__codelineno-0-439></a><span class=sd> template = "hi {{ data.hello }}!"</span>
|
||
<a id=__codelineno-0-440 name=__codelineno-0-440></a><span class=sd> def get_context_data(self):</span>
|
||
<a id=__codelineno-0-441 name=__codelineno-0-441></a><span class=sd> data = self.inject("provider")</span>
|
||
<a id=__codelineno-0-442 name=__codelineno-0-442></a><span class=sd> return {"data": data}</span>
|
||
<a id=__codelineno-0-443 name=__codelineno-0-443></a><span class=sd> ```</span>
|
||
<a id=__codelineno-0-444 name=__codelineno-0-444></a>
|
||
<a id=__codelineno-0-445 name=__codelineno-0-445></a><span class=sd> This renders into:</span>
|
||
<a id=__codelineno-0-446 name=__codelineno-0-446></a><span class=sd> ```</span>
|
||
<a id=__codelineno-0-447 name=__codelineno-0-447></a><span class=sd> hi world!</span>
|
||
<a id=__codelineno-0-448 name=__codelineno-0-448></a><span class=sd> ```</span>
|
||
<a id=__codelineno-0-449 name=__codelineno-0-449></a>
|
||
<a id=__codelineno-0-450 name=__codelineno-0-450></a><span class=sd> As the `{{ data.hello }}` is taken from the "provider".</span>
|
||
<a id=__codelineno-0-451 name=__codelineno-0-451></a><span class=sd> """</span>
|
||
<a id=__codelineno-0-452 name=__codelineno-0-452></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span> <span class=ow>is</span> <span class=kc>None</span><span class=p>:</span>
|
||
<a id=__codelineno-0-453 name=__codelineno-0-453></a> <span class=k>raise</span> <span class=ne>RuntimeError</span><span class=p>(</span>
|
||
<a id=__codelineno-0-454 name=__codelineno-0-454></a> <span class=sa>f</span><span class=s2>"Method 'inject()' of component '</span><span class=si>{</span><span class=bp>self</span><span class=o>.</span><span class=n>name</span><span class=si>}</span><span class=s2>' was called outside of 'get_context_data()'"</span>
|
||
<a id=__codelineno-0-455 name=__codelineno-0-455></a> <span class=p>)</span>
|
||
<a id=__codelineno-0-456 name=__codelineno-0-456></a>
|
||
<a id=__codelineno-0-457 name=__codelineno-0-457></a> <span class=k>return</span> <span class=n>get_injected_context_var</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>name</span><span class=p>,</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>context</span><span class=p>,</span> <span class=n>key</span><span class=p>,</span> <span class=n>default</span><span class=p>)</span>
|
||
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.components.dynamic.DynamicComponent.on_render_after class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_render_after</span> <a href=#django_components.components.dynamic.DynamicComponent.on_render_after class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_render_after</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n><span title=django.template.base.Template>Template</span></span><span class=p>,</span> <span class=n>content</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>)</span> <span class=o>-></span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.slots.SlotResult>SlotResult</span></span><span class=p>]</span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Hook that runs just after the component's template was rendered. It receives the rendered output as the last argument.</p> <p>You can use this hook to access the context or the template, but modifying them won't have any effect.</p> <p>To override the content that gets rendered, you can return a string or SafeString from this hook.</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-267>267</a></span>
|
||
<span class=normal><a href=#__codelineno-0-268>268</a></span>
|
||
<span class=normal><a href=#__codelineno-0-269>269</a></span>
|
||
<span class=normal><a href=#__codelineno-0-270>270</a></span>
|
||
<span class=normal><a href=#__codelineno-0-271>271</a></span>
|
||
<span class=normal><a href=#__codelineno-0-272>272</a></span>
|
||
<span class=normal><a href=#__codelineno-0-273>273</a></span>
|
||
<span class=normal><a href=#__codelineno-0-274>274</a></span>
|
||
<span class=normal><a href=#__codelineno-0-275>275</a></span>
|
||
<span class=normal><a href=#__codelineno-0-276>276</a></span>
|
||
<span class=normal><a href=#__codelineno-0-277>277</a></span>
|
||
<span class=normal><a href=#__codelineno-0-278>278</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-267 name=__codelineno-0-267></a><span class=k>def</span> <span class=nf>on_render_after</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Template</span><span class=p>,</span> <span class=n>content</span><span class=p>:</span> <span class=nb>str</span><span class=p>)</span> <span class=o>-></span> <span class=n>Optional</span><span class=p>[</span><span class=n>SlotResult</span><span class=p>]:</span>
|
||
<a id=__codelineno-0-268 name=__codelineno-0-268></a><span class=w> </span><span class=sd>"""</span>
|
||
<a id=__codelineno-0-269 name=__codelineno-0-269></a><span class=sd> Hook that runs just after the component's template was rendered.</span>
|
||
<a id=__codelineno-0-270 name=__codelineno-0-270></a><span class=sd> It receives the rendered output as the last argument.</span>
|
||
<a id=__codelineno-0-271 name=__codelineno-0-271></a>
|
||
<a id=__codelineno-0-272 name=__codelineno-0-272></a><span class=sd> You can use this hook to access the context or the template, but modifying</span>
|
||
<a id=__codelineno-0-273 name=__codelineno-0-273></a><span class=sd> them won't have any effect.</span>
|
||
<a id=__codelineno-0-274 name=__codelineno-0-274></a>
|
||
<a id=__codelineno-0-275 name=__codelineno-0-275></a><span class=sd> To override the content that gets rendered, you can return a string or SafeString</span>
|
||
<a id=__codelineno-0-276 name=__codelineno-0-276></a><span class=sd> from this hook.</span>
|
||
<a id=__codelineno-0-277 name=__codelineno-0-277></a><span class=sd> """</span>
|
||
<a id=__codelineno-0-278 name=__codelineno-0-278></a> <span class=k>pass</span>
|
||
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.components.dynamic.DynamicComponent.on_render_before class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_render_before</span> <a href=#django_components.components.dynamic.DynamicComponent.on_render_before class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_render_before</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n><span title=django.template.base.Template>Template</span></span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Hook that runs just before the component's template is rendered.</p> <p>You can use this hook to access or modify the context or the template.</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-259>259</a></span>
|
||
<span class=normal><a href=#__codelineno-0-260>260</a></span>
|
||
<span class=normal><a href=#__codelineno-0-261>261</a></span>
|
||
<span class=normal><a href=#__codelineno-0-262>262</a></span>
|
||
<span class=normal><a href=#__codelineno-0-263>263</a></span>
|
||
<span class=normal><a href=#__codelineno-0-264>264</a></span>
|
||
<span class=normal><a href=#__codelineno-0-265>265</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-259 name=__codelineno-0-259></a><span class=k>def</span> <span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Template</span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
||
<a id=__codelineno-0-260 name=__codelineno-0-260></a><span class=w> </span><span class=sd>"""</span>
|
||
<a id=__codelineno-0-261 name=__codelineno-0-261></a><span class=sd> Hook that runs just before the component's template is rendered.</span>
|
||
<a id=__codelineno-0-262 name=__codelineno-0-262></a>
|
||
<a id=__codelineno-0-263 name=__codelineno-0-263></a><span class=sd> You can use this hook to access or modify the context or the template.</span>
|
||
<a id=__codelineno-0-264 name=__codelineno-0-264></a><span class=sd> """</span>
|
||
<a id=__codelineno-0-265 name=__codelineno-0-265></a> <span class=k>pass</span>
|
||
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.components.dynamic.DynamicComponent.render class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.components.dynamic.DynamicComponent.render class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>render</span><span class=p>(</span>
|
||
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>],</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.ArgsType>ArgsType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.KwargsType>KwargsType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.SlotsType>SlotsType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>escape_slots_content</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span>
|
||
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=nb>type</span><span class=p>:</span> <span class=n><span title=django_components.dependencies.RenderType>RenderType</span></span> <span class=o>=</span> <span class=s2>"document"</span><span class=p>,</span>
|
||
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=n>render_dependencies</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span>
|
||
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=p>)</span> <span class=o>-></span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Render the component into a string.</p> <p>Inputs: - <code>args</code> - Positional args for the component. This is the same as calling the component as <code>{% component "my_comp" arg1 arg2 ... %}</code> - <code>kwargs</code> - Kwargs for the component. This is the same as calling the component as <code>{% component "my_comp" key1=val1 key2=val2 ... %}</code> - <code>slots</code> - Component slot fills. This is the same as pasing <code>{% fill %}</code> tags to the component. Accepts a dictionary of <code>{ slot_name: slot_content }</code> where <code>slot_content</code> can be a string or render function. - <code>escape_slots_content</code> - Whether the content from <code>slots</code> should be escaped. - <code>context</code> - A context (dictionary or Django's Context) within which the component is rendered. The keys on the context can be accessed from within the template. - NOTE: In "isolated" mode, context is NOT accessible, and data MUST be passed via component's args and kwargs. - <code>type</code> - Configure how to handle JS and CSS dependencies. - <code>"document"</code> (default) - JS dependencies are inserted into <code>{% component_js_dependencies %}</code>, or to the end of the <code><body></code> tag. CSS dependencies are inserted into <code>{% component_css_dependencies %}</code>, or the end of the <code><head></code> tag. - <code>render_dependencies</code> - Set this to <code>False</code> if you want to insert the resulting HTML into another component.</p> <p>Example: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
||
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=mi>1</span><span class=p>,</span> <span class=s2>"two"</span><span class=p>,</span> <span class=p>{}],</span>
|
||
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
|
||
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>"key"</span><span class=p>:</span> <span class=mi>123</span><span class=p>,</span>
|
||
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=p>},</span>
|
||
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
||
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=s2>"header"</span><span class=p>:</span> <span class=s1>'STATIC TEXT HERE'</span><span class=p>,</span>
|
||
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=s2>"footer"</span><span class=p>:</span> <span class=k>lambda</span> <span class=n>ctx</span><span class=p>,</span> <span class=n>slot_kwargs</span><span class=p>,</span> <span class=n>slot_ref</span><span class=p>:</span> <span class=sa>f</span><span class=s1>'CTX: </span><span class=si>{</span><span class=n>ctx</span><span class=p>[</span><span class=s1>'hello'</span><span class=p>]</span><span class=si>}</span><span class=s1> SLOT_DATA: </span><span class=si>{</span><span class=n>slot_kwargs</span><span class=p>[</span><span class=s1>'abc'</span><span class=p>]</span><span class=si>}</span><span class=s1>'</span><span class=p>,</span>
|
||
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=p>},</span>
|
||
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=n>escape_slots_content</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span>
|
||
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a><span class=p>)</span>
|
||
</code></pre></div></p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-548>548</a></span>
|
||
<span class=normal><a href=#__codelineno-0-549>549</a></span>
|
||
<span class=normal><a href=#__codelineno-0-550>550</a></span>
|
||
<span class=normal><a href=#__codelineno-0-551>551</a></span>
|
||
<span class=normal><a href=#__codelineno-0-552>552</a></span>
|
||
<span class=normal><a href=#__codelineno-0-553>553</a></span>
|
||
<span class=normal><a href=#__codelineno-0-554>554</a></span>
|
||
<span class=normal><a href=#__codelineno-0-555>555</a></span>
|
||
<span class=normal><a href=#__codelineno-0-556>556</a></span>
|
||
<span class=normal><a href=#__codelineno-0-557>557</a></span>
|
||
<span class=normal><a href=#__codelineno-0-558>558</a></span>
|
||
<span class=normal><a href=#__codelineno-0-559>559</a></span>
|
||
<span class=normal><a href=#__codelineno-0-560>560</a></span>
|
||
<span class=normal><a href=#__codelineno-0-561>561</a></span>
|
||
<span class=normal><a href=#__codelineno-0-562>562</a></span>
|
||
<span class=normal><a href=#__codelineno-0-563>563</a></span>
|
||
<span class=normal><a href=#__codelineno-0-564>564</a></span>
|
||
<span class=normal><a href=#__codelineno-0-565>565</a></span>
|
||
<span class=normal><a href=#__codelineno-0-566>566</a></span>
|
||
<span class=normal><a href=#__codelineno-0-567>567</a></span>
|
||
<span class=normal><a href=#__codelineno-0-568>568</a></span>
|
||
<span class=normal><a href=#__codelineno-0-569>569</a></span>
|
||
<span class=normal><a href=#__codelineno-0-570>570</a></span>
|
||
<span class=normal><a href=#__codelineno-0-571>571</a></span>
|
||
<span class=normal><a href=#__codelineno-0-572>572</a></span>
|
||
<span class=normal><a href=#__codelineno-0-573>573</a></span>
|
||
<span class=normal><a href=#__codelineno-0-574>574</a></span>
|
||
<span class=normal><a href=#__codelineno-0-575>575</a></span>
|
||
<span class=normal><a href=#__codelineno-0-576>576</a></span>
|
||
<span class=normal><a href=#__codelineno-0-577>577</a></span>
|
||
<span class=normal><a href=#__codelineno-0-578>578</a></span>
|
||
<span class=normal><a href=#__codelineno-0-579>579</a></span>
|
||
<span class=normal><a href=#__codelineno-0-580>580</a></span>
|
||
<span class=normal><a href=#__codelineno-0-581>581</a></span>
|
||
<span class=normal><a href=#__codelineno-0-582>582</a></span>
|
||
<span class=normal><a href=#__codelineno-0-583>583</a></span>
|
||
<span class=normal><a href=#__codelineno-0-584>584</a></span>
|
||
<span class=normal><a href=#__codelineno-0-585>585</a></span>
|
||
<span class=normal><a href=#__codelineno-0-586>586</a></span>
|
||
<span class=normal><a href=#__codelineno-0-587>587</a></span>
|
||
<span class=normal><a href=#__codelineno-0-588>588</a></span>
|
||
<span class=normal><a href=#__codelineno-0-589>589</a></span>
|
||
<span class=normal><a href=#__codelineno-0-590>590</a></span>
|
||
<span class=normal><a href=#__codelineno-0-591>591</a></span>
|
||
<span class=normal><a href=#__codelineno-0-592>592</a></span>
|
||
<span class=normal><a href=#__codelineno-0-593>593</a></span>
|
||
<span class=normal><a href=#__codelineno-0-594>594</a></span>
|
||
<span class=normal><a href=#__codelineno-0-595>595</a></span>
|
||
<span class=normal><a href=#__codelineno-0-596>596</a></span>
|
||
<span class=normal><a href=#__codelineno-0-597>597</a></span>
|
||
<span class=normal><a href=#__codelineno-0-598>598</a></span>
|
||
<span class=normal><a href=#__codelineno-0-599>599</a></span>
|
||
<span class=normal><a href=#__codelineno-0-600>600</a></span>
|
||
<span class=normal><a href=#__codelineno-0-601>601</a></span>
|
||
<span class=normal><a href=#__codelineno-0-602>602</a></span>
|
||
<span class=normal><a href=#__codelineno-0-603>603</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-548 name=__codelineno-0-548></a><span class=nd>@classmethod</span>
|
||
<a id=__codelineno-0-549 name=__codelineno-0-549></a><span class=k>def</span> <span class=nf>render</span><span class=p>(</span>
|
||
<a id=__codelineno-0-550 name=__codelineno-0-550></a> <span class=bp>cls</span><span class=p>,</span>
|
||
<a id=__codelineno-0-551 name=__codelineno-0-551></a> <span class=n>context</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Union</span><span class=p>[</span><span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>],</span> <span class=n>Context</span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-552 name=__codelineno-0-552></a> <span class=n>args</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>ArgsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-553 name=__codelineno-0-553></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>KwargsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-554 name=__codelineno-0-554></a> <span class=n>slots</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>SlotsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-555 name=__codelineno-0-555></a> <span class=n>escape_slots_content</span><span class=p>:</span> <span class=nb>bool</span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span>
|
||
<a id=__codelineno-0-556 name=__codelineno-0-556></a> <span class=nb>type</span><span class=p>:</span> <span class=n>RenderType</span> <span class=o>=</span> <span class=s2>"document"</span><span class=p>,</span>
|
||
<a id=__codelineno-0-557 name=__codelineno-0-557></a> <span class=n>render_dependencies</span><span class=p>:</span> <span class=nb>bool</span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span>
|
||
<a id=__codelineno-0-558 name=__codelineno-0-558></a><span class=p>)</span> <span class=o>-></span> <span class=nb>str</span><span class=p>:</span>
|
||
<a id=__codelineno-0-559 name=__codelineno-0-559></a><span class=w> </span><span class=sd>"""</span>
|
||
<a id=__codelineno-0-560 name=__codelineno-0-560></a><span class=sd> Render the component into a string.</span>
|
||
<a id=__codelineno-0-561 name=__codelineno-0-561></a>
|
||
<a id=__codelineno-0-562 name=__codelineno-0-562></a><span class=sd> Inputs:</span>
|
||
<a id=__codelineno-0-563 name=__codelineno-0-563></a><span class=sd> - `args` - Positional args for the component. This is the same as calling the component</span>
|
||
<a id=__codelineno-0-564 name=__codelineno-0-564></a><span class=sd> as `{% component "my_comp" arg1 arg2 ... %}`</span>
|
||
<a id=__codelineno-0-565 name=__codelineno-0-565></a><span class=sd> - `kwargs` - Kwargs for the component. This is the same as calling the component</span>
|
||
<a id=__codelineno-0-566 name=__codelineno-0-566></a><span class=sd> as `{% component "my_comp" key1=val1 key2=val2 ... %}`</span>
|
||
<a id=__codelineno-0-567 name=__codelineno-0-567></a><span class=sd> - `slots` - Component slot fills. This is the same as pasing `{% fill %}` tags to the component.</span>
|
||
<a id=__codelineno-0-568 name=__codelineno-0-568></a><span class=sd> Accepts a dictionary of `{ slot_name: slot_content }` where `slot_content` can be a string</span>
|
||
<a id=__codelineno-0-569 name=__codelineno-0-569></a><span class=sd> or render function.</span>
|
||
<a id=__codelineno-0-570 name=__codelineno-0-570></a><span class=sd> - `escape_slots_content` - Whether the content from `slots` should be escaped.</span>
|
||
<a id=__codelineno-0-571 name=__codelineno-0-571></a><span class=sd> - `context` - A context (dictionary or Django's Context) within which the component</span>
|
||
<a id=__codelineno-0-572 name=__codelineno-0-572></a><span class=sd> is rendered. The keys on the context can be accessed from within the template.</span>
|
||
<a id=__codelineno-0-573 name=__codelineno-0-573></a><span class=sd> - NOTE: In "isolated" mode, context is NOT accessible, and data MUST be passed via</span>
|
||
<a id=__codelineno-0-574 name=__codelineno-0-574></a><span class=sd> component's args and kwargs.</span>
|
||
<a id=__codelineno-0-575 name=__codelineno-0-575></a><span class=sd> - `type` - Configure how to handle JS and CSS dependencies.</span>
|
||
<a id=__codelineno-0-576 name=__codelineno-0-576></a><span class=sd> - `"document"` (default) - JS dependencies are inserted into `{% component_js_dependencies %}`,</span>
|
||
<a id=__codelineno-0-577 name=__codelineno-0-577></a><span class=sd> or to the end of the `<body>` tag. CSS dependencies are inserted into</span>
|
||
<a id=__codelineno-0-578 name=__codelineno-0-578></a><span class=sd> `{% component_css_dependencies %}`, or the end of the `<head>` tag.</span>
|
||
<a id=__codelineno-0-579 name=__codelineno-0-579></a><span class=sd> - `render_dependencies` - Set this to `False` if you want to insert the resulting HTML into another component.</span>
|
||
<a id=__codelineno-0-580 name=__codelineno-0-580></a>
|
||
<a id=__codelineno-0-581 name=__codelineno-0-581></a><span class=sd> Example:</span>
|
||
<a id=__codelineno-0-582 name=__codelineno-0-582></a><span class=sd> ```py</span>
|
||
<a id=__codelineno-0-583 name=__codelineno-0-583></a><span class=sd> MyComponent.render(</span>
|
||
<a id=__codelineno-0-584 name=__codelineno-0-584></a><span class=sd> args=[1, "two", {}],</span>
|
||
<a id=__codelineno-0-585 name=__codelineno-0-585></a><span class=sd> kwargs={</span>
|
||
<a id=__codelineno-0-586 name=__codelineno-0-586></a><span class=sd> "key": 123,</span>
|
||
<a id=__codelineno-0-587 name=__codelineno-0-587></a><span class=sd> },</span>
|
||
<a id=__codelineno-0-588 name=__codelineno-0-588></a><span class=sd> slots={</span>
|
||
<a id=__codelineno-0-589 name=__codelineno-0-589></a><span class=sd> "header": 'STATIC TEXT HERE',</span>
|
||
<a id=__codelineno-0-590 name=__codelineno-0-590></a><span class=sd> "footer": lambda ctx, slot_kwargs, slot_ref: f'CTX: {ctx['hello']} SLOT_DATA: {slot_kwargs['abc']}',</span>
|
||
<a id=__codelineno-0-591 name=__codelineno-0-591></a><span class=sd> },</span>
|
||
<a id=__codelineno-0-592 name=__codelineno-0-592></a><span class=sd> escape_slots_content=False,</span>
|
||
<a id=__codelineno-0-593 name=__codelineno-0-593></a><span class=sd> )</span>
|
||
<a id=__codelineno-0-594 name=__codelineno-0-594></a><span class=sd> ```</span>
|
||
<a id=__codelineno-0-595 name=__codelineno-0-595></a><span class=sd> """</span>
|
||
<a id=__codelineno-0-596 name=__codelineno-0-596></a> <span class=c1># This method may be called as class method or as instance method.</span>
|
||
<a id=__codelineno-0-597 name=__codelineno-0-597></a> <span class=c1># If called as class method, create a new instance.</span>
|
||
<a id=__codelineno-0-598 name=__codelineno-0-598></a> <span class=k>if</span> <span class=nb>isinstance</span><span class=p>(</span><span class=bp>cls</span><span class=p>,</span> <span class=n>Component</span><span class=p>):</span>
|
||
<a id=__codelineno-0-599 name=__codelineno-0-599></a> <span class=n>comp</span><span class=p>:</span> <span class=n>Component</span> <span class=o>=</span> <span class=bp>cls</span>
|
||
<a id=__codelineno-0-600 name=__codelineno-0-600></a> <span class=k>else</span><span class=p>:</span>
|
||
<a id=__codelineno-0-601 name=__codelineno-0-601></a> <span class=n>comp</span> <span class=o>=</span> <span class=bp>cls</span><span class=p>()</span>
|
||
<a id=__codelineno-0-602 name=__codelineno-0-602></a>
|
||
<a id=__codelineno-0-603 name=__codelineno-0-603></a> <span class=k>return</span> <span class=n>comp</span><span class=o>.</span><span class=n>_render</span><span class=p>(</span><span class=n>context</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>escape_slots_content</span><span class=p>,</span> <span class=nb>type</span><span class=p>,</span> <span class=n>render_dependencies</span><span class=p>)</span>
|
||
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.components.dynamic.DynamicComponent.render_to_response class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render_to_response</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.components.dynamic.DynamicComponent.render_to_response class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>render_to_response</span><span class=p>(</span>
|
||
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>],</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.SlotsType>SlotsType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>escape_slots_content</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span>
|
||
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.ArgsType>ArgsType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.KwargsType>KwargsType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=nb>type</span><span class=p>:</span> <span class=n><span title=django_components.dependencies.RenderType>RenderType</span></span> <span class=o>=</span> <span class=s2>"document"</span><span class=p>,</span>
|
||
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=o>*</span><span class=n>response_args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span>
|
||
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=o>**</span><span class=n>response_kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
|
||
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a><span class=p>)</span> <span class=o>-></span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.0/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
|
||
</code></pre></div> <div class="doc doc-contents "> <p>Render the component and wrap the content in the response class.</p> <p>The response class is taken from <code>Component.response_class</code>. Defaults to <code>django.http.HttpResponse</code>.</p> <p>This is the interface for the <code>django.views.View</code> class which allows us to use components as Django views with <code>component.as_view()</code>.</p> <p>Inputs: - <code>args</code> - Positional args for the component. This is the same as calling the component as <code>{% component "my_comp" arg1 arg2 ... %}</code> - <code>kwargs</code> - Kwargs for the component. This is the same as calling the component as <code>{% component "my_comp" key1=val1 key2=val2 ... %}</code> - <code>slots</code> - Component slot fills. This is the same as pasing <code>{% fill %}</code> tags to the component. Accepts a dictionary of <code>{ slot_name: slot_content }</code> where <code>slot_content</code> can be a string or render function. - <code>escape_slots_content</code> - Whether the content from <code>slots</code> should be escaped. - <code>context</code> - A context (dictionary or Django's Context) within which the component is rendered. The keys on the context can be accessed from within the template. - NOTE: In "isolated" mode, context is NOT accessible, and data MUST be passed via component's args and kwargs. - <code>type</code> - Configure how to handle JS and CSS dependencies. - <code>"document"</code> (default) - JS dependencies are inserted into <code>{% component_js_dependencies %}</code>, or to the end of the <code><body></code> tag. CSS dependencies are inserted into <code>{% component_css_dependencies %}</code>, or the end of the <code><head></code> tag.</p> <p>Any additional args and kwargs are passed to the <code>response_class</code>.</p> <p>Example: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
|
||
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=mi>1</span><span class=p>,</span> <span class=s2>"two"</span><span class=p>,</span> <span class=p>{}],</span>
|
||
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
|
||
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>"key"</span><span class=p>:</span> <span class=mi>123</span><span class=p>,</span>
|
||
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=p>},</span>
|
||
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
||
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=s2>"header"</span><span class=p>:</span> <span class=s1>'STATIC TEXT HERE'</span><span class=p>,</span>
|
||
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=s2>"footer"</span><span class=p>:</span> <span class=k>lambda</span> <span class=n>ctx</span><span class=p>,</span> <span class=n>slot_kwargs</span><span class=p>,</span> <span class=n>slot_ref</span><span class=p>:</span> <span class=sa>f</span><span class=s1>'CTX: </span><span class=si>{</span><span class=n>ctx</span><span class=p>[</span><span class=s1>'hello'</span><span class=p>]</span><span class=si>}</span><span class=s1> SLOT_DATA: </span><span class=si>{</span><span class=n>slot_kwargs</span><span class=p>[</span><span class=s1>'abc'</span><span class=p>]</span><span class=si>}</span><span class=s1>'</span><span class=p>,</span>
|
||
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=p>},</span>
|
||
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=n>escape_slots_content</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span>
|
||
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=c1># HttpResponse input</span>
|
||
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=n>status</span><span class=o>=</span><span class=mi>201</span><span class=p>,</span>
|
||
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=n>headers</span><span class=o>=</span><span class=p>{</span><span class=o>...</span><span class=p>},</span>
|
||
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a><span class=p>)</span>
|
||
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a><span class=c1># HttpResponse(content=..., status=201, headers=...)</span>
|
||
</code></pre></div></p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-478>478</a></span>
|
||
<span class=normal><a href=#__codelineno-0-479>479</a></span>
|
||
<span class=normal><a href=#__codelineno-0-480>480</a></span>
|
||
<span class=normal><a href=#__codelineno-0-481>481</a></span>
|
||
<span class=normal><a href=#__codelineno-0-482>482</a></span>
|
||
<span class=normal><a href=#__codelineno-0-483>483</a></span>
|
||
<span class=normal><a href=#__codelineno-0-484>484</a></span>
|
||
<span class=normal><a href=#__codelineno-0-485>485</a></span>
|
||
<span class=normal><a href=#__codelineno-0-486>486</a></span>
|
||
<span class=normal><a href=#__codelineno-0-487>487</a></span>
|
||
<span class=normal><a href=#__codelineno-0-488>488</a></span>
|
||
<span class=normal><a href=#__codelineno-0-489>489</a></span>
|
||
<span class=normal><a href=#__codelineno-0-490>490</a></span>
|
||
<span class=normal><a href=#__codelineno-0-491>491</a></span>
|
||
<span class=normal><a href=#__codelineno-0-492>492</a></span>
|
||
<span class=normal><a href=#__codelineno-0-493>493</a></span>
|
||
<span class=normal><a href=#__codelineno-0-494>494</a></span>
|
||
<span class=normal><a href=#__codelineno-0-495>495</a></span>
|
||
<span class=normal><a href=#__codelineno-0-496>496</a></span>
|
||
<span class=normal><a href=#__codelineno-0-497>497</a></span>
|
||
<span class=normal><a href=#__codelineno-0-498>498</a></span>
|
||
<span class=normal><a href=#__codelineno-0-499>499</a></span>
|
||
<span class=normal><a href=#__codelineno-0-500>500</a></span>
|
||
<span class=normal><a href=#__codelineno-0-501>501</a></span>
|
||
<span class=normal><a href=#__codelineno-0-502>502</a></span>
|
||
<span class=normal><a href=#__codelineno-0-503>503</a></span>
|
||
<span class=normal><a href=#__codelineno-0-504>504</a></span>
|
||
<span class=normal><a href=#__codelineno-0-505>505</a></span>
|
||
<span class=normal><a href=#__codelineno-0-506>506</a></span>
|
||
<span class=normal><a href=#__codelineno-0-507>507</a></span>
|
||
<span class=normal><a href=#__codelineno-0-508>508</a></span>
|
||
<span class=normal><a href=#__codelineno-0-509>509</a></span>
|
||
<span class=normal><a href=#__codelineno-0-510>510</a></span>
|
||
<span class=normal><a href=#__codelineno-0-511>511</a></span>
|
||
<span class=normal><a href=#__codelineno-0-512>512</a></span>
|
||
<span class=normal><a href=#__codelineno-0-513>513</a></span>
|
||
<span class=normal><a href=#__codelineno-0-514>514</a></span>
|
||
<span class=normal><a href=#__codelineno-0-515>515</a></span>
|
||
<span class=normal><a href=#__codelineno-0-516>516</a></span>
|
||
<span class=normal><a href=#__codelineno-0-517>517</a></span>
|
||
<span class=normal><a href=#__codelineno-0-518>518</a></span>
|
||
<span class=normal><a href=#__codelineno-0-519>519</a></span>
|
||
<span class=normal><a href=#__codelineno-0-520>520</a></span>
|
||
<span class=normal><a href=#__codelineno-0-521>521</a></span>
|
||
<span class=normal><a href=#__codelineno-0-522>522</a></span>
|
||
<span class=normal><a href=#__codelineno-0-523>523</a></span>
|
||
<span class=normal><a href=#__codelineno-0-524>524</a></span>
|
||
<span class=normal><a href=#__codelineno-0-525>525</a></span>
|
||
<span class=normal><a href=#__codelineno-0-526>526</a></span>
|
||
<span class=normal><a href=#__codelineno-0-527>527</a></span>
|
||
<span class=normal><a href=#__codelineno-0-528>528</a></span>
|
||
<span class=normal><a href=#__codelineno-0-529>529</a></span>
|
||
<span class=normal><a href=#__codelineno-0-530>530</a></span>
|
||
<span class=normal><a href=#__codelineno-0-531>531</a></span>
|
||
<span class=normal><a href=#__codelineno-0-532>532</a></span>
|
||
<span class=normal><a href=#__codelineno-0-533>533</a></span>
|
||
<span class=normal><a href=#__codelineno-0-534>534</a></span>
|
||
<span class=normal><a href=#__codelineno-0-535>535</a></span>
|
||
<span class=normal><a href=#__codelineno-0-536>536</a></span>
|
||
<span class=normal><a href=#__codelineno-0-537>537</a></span>
|
||
<span class=normal><a href=#__codelineno-0-538>538</a></span>
|
||
<span class=normal><a href=#__codelineno-0-539>539</a></span>
|
||
<span class=normal><a href=#__codelineno-0-540>540</a></span>
|
||
<span class=normal><a href=#__codelineno-0-541>541</a></span>
|
||
<span class=normal><a href=#__codelineno-0-542>542</a></span>
|
||
<span class=normal><a href=#__codelineno-0-543>543</a></span>
|
||
<span class=normal><a href=#__codelineno-0-544>544</a></span>
|
||
<span class=normal><a href=#__codelineno-0-545>545</a></span>
|
||
<span class=normal><a href=#__codelineno-0-546>546</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-478 name=__codelineno-0-478></a><span class=nd>@classmethod</span>
|
||
<a id=__codelineno-0-479 name=__codelineno-0-479></a><span class=k>def</span> <span class=nf>render_to_response</span><span class=p>(</span>
|
||
<a id=__codelineno-0-480 name=__codelineno-0-480></a> <span class=bp>cls</span><span class=p>,</span>
|
||
<a id=__codelineno-0-481 name=__codelineno-0-481></a> <span class=n>context</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Union</span><span class=p>[</span><span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>],</span> <span class=n>Context</span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-482 name=__codelineno-0-482></a> <span class=n>slots</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>SlotsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-483 name=__codelineno-0-483></a> <span class=n>escape_slots_content</span><span class=p>:</span> <span class=nb>bool</span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span>
|
||
<a id=__codelineno-0-484 name=__codelineno-0-484></a> <span class=n>args</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>ArgsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-485 name=__codelineno-0-485></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>KwargsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||
<a id=__codelineno-0-486 name=__codelineno-0-486></a> <span class=nb>type</span><span class=p>:</span> <span class=n>RenderType</span> <span class=o>=</span> <span class=s2>"document"</span><span class=p>,</span>
|
||
<a id=__codelineno-0-487 name=__codelineno-0-487></a> <span class=o>*</span><span class=n>response_args</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span>
|
||
<a id=__codelineno-0-488 name=__codelineno-0-488></a> <span class=o>**</span><span class=n>response_kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span>
|
||
<a id=__codelineno-0-489 name=__codelineno-0-489></a><span class=p>)</span> <span class=o>-></span> <span class=n>HttpResponse</span><span class=p>:</span>
|
||
<a id=__codelineno-0-490 name=__codelineno-0-490></a><span class=w> </span><span class=sd>"""</span>
|
||
<a id=__codelineno-0-491 name=__codelineno-0-491></a><span class=sd> Render the component and wrap the content in the response class.</span>
|
||
<a id=__codelineno-0-492 name=__codelineno-0-492></a>
|
||
<a id=__codelineno-0-493 name=__codelineno-0-493></a><span class=sd> The response class is taken from `Component.response_class`. Defaults to `django.http.HttpResponse`.</span>
|
||
<a id=__codelineno-0-494 name=__codelineno-0-494></a>
|
||
<a id=__codelineno-0-495 name=__codelineno-0-495></a><span class=sd> This is the interface for the `django.views.View` class which allows us to</span>
|
||
<a id=__codelineno-0-496 name=__codelineno-0-496></a><span class=sd> use components as Django views with `component.as_view()`.</span>
|
||
<a id=__codelineno-0-497 name=__codelineno-0-497></a>
|
||
<a id=__codelineno-0-498 name=__codelineno-0-498></a><span class=sd> Inputs:</span>
|
||
<a id=__codelineno-0-499 name=__codelineno-0-499></a><span class=sd> - `args` - Positional args for the component. This is the same as calling the component</span>
|
||
<a id=__codelineno-0-500 name=__codelineno-0-500></a><span class=sd> as `{% component "my_comp" arg1 arg2 ... %}`</span>
|
||
<a id=__codelineno-0-501 name=__codelineno-0-501></a><span class=sd> - `kwargs` - Kwargs for the component. This is the same as calling the component</span>
|
||
<a id=__codelineno-0-502 name=__codelineno-0-502></a><span class=sd> as `{% component "my_comp" key1=val1 key2=val2 ... %}`</span>
|
||
<a id=__codelineno-0-503 name=__codelineno-0-503></a><span class=sd> - `slots` - Component slot fills. This is the same as pasing `{% fill %}` tags to the component.</span>
|
||
<a id=__codelineno-0-504 name=__codelineno-0-504></a><span class=sd> Accepts a dictionary of `{ slot_name: slot_content }` where `slot_content` can be a string</span>
|
||
<a id=__codelineno-0-505 name=__codelineno-0-505></a><span class=sd> or render function.</span>
|
||
<a id=__codelineno-0-506 name=__codelineno-0-506></a><span class=sd> - `escape_slots_content` - Whether the content from `slots` should be escaped.</span>
|
||
<a id=__codelineno-0-507 name=__codelineno-0-507></a><span class=sd> - `context` - A context (dictionary or Django's Context) within which the component</span>
|
||
<a id=__codelineno-0-508 name=__codelineno-0-508></a><span class=sd> is rendered. The keys on the context can be accessed from within the template.</span>
|
||
<a id=__codelineno-0-509 name=__codelineno-0-509></a><span class=sd> - NOTE: In "isolated" mode, context is NOT accessible, and data MUST be passed via</span>
|
||
<a id=__codelineno-0-510 name=__codelineno-0-510></a><span class=sd> component's args and kwargs.</span>
|
||
<a id=__codelineno-0-511 name=__codelineno-0-511></a><span class=sd> - `type` - Configure how to handle JS and CSS dependencies.</span>
|
||
<a id=__codelineno-0-512 name=__codelineno-0-512></a><span class=sd> - `"document"` (default) - JS dependencies are inserted into `{% component_js_dependencies %}`,</span>
|
||
<a id=__codelineno-0-513 name=__codelineno-0-513></a><span class=sd> or to the end of the `<body>` tag. CSS dependencies are inserted into</span>
|
||
<a id=__codelineno-0-514 name=__codelineno-0-514></a><span class=sd> `{% component_css_dependencies %}`, or the end of the `<head>` tag.</span>
|
||
<a id=__codelineno-0-515 name=__codelineno-0-515></a>
|
||
<a id=__codelineno-0-516 name=__codelineno-0-516></a><span class=sd> Any additional args and kwargs are passed to the `response_class`.</span>
|
||
<a id=__codelineno-0-517 name=__codelineno-0-517></a>
|
||
<a id=__codelineno-0-518 name=__codelineno-0-518></a><span class=sd> Example:</span>
|
||
<a id=__codelineno-0-519 name=__codelineno-0-519></a><span class=sd> ```py</span>
|
||
<a id=__codelineno-0-520 name=__codelineno-0-520></a><span class=sd> MyComponent.render_to_response(</span>
|
||
<a id=__codelineno-0-521 name=__codelineno-0-521></a><span class=sd> args=[1, "two", {}],</span>
|
||
<a id=__codelineno-0-522 name=__codelineno-0-522></a><span class=sd> kwargs={</span>
|
||
<a id=__codelineno-0-523 name=__codelineno-0-523></a><span class=sd> "key": 123,</span>
|
||
<a id=__codelineno-0-524 name=__codelineno-0-524></a><span class=sd> },</span>
|
||
<a id=__codelineno-0-525 name=__codelineno-0-525></a><span class=sd> slots={</span>
|
||
<a id=__codelineno-0-526 name=__codelineno-0-526></a><span class=sd> "header": 'STATIC TEXT HERE',</span>
|
||
<a id=__codelineno-0-527 name=__codelineno-0-527></a><span class=sd> "footer": lambda ctx, slot_kwargs, slot_ref: f'CTX: {ctx['hello']} SLOT_DATA: {slot_kwargs['abc']}',</span>
|
||
<a id=__codelineno-0-528 name=__codelineno-0-528></a><span class=sd> },</span>
|
||
<a id=__codelineno-0-529 name=__codelineno-0-529></a><span class=sd> escape_slots_content=False,</span>
|
||
<a id=__codelineno-0-530 name=__codelineno-0-530></a><span class=sd> # HttpResponse input</span>
|
||
<a id=__codelineno-0-531 name=__codelineno-0-531></a><span class=sd> status=201,</span>
|
||
<a id=__codelineno-0-532 name=__codelineno-0-532></a><span class=sd> headers={...},</span>
|
||
<a id=__codelineno-0-533 name=__codelineno-0-533></a><span class=sd> )</span>
|
||
<a id=__codelineno-0-534 name=__codelineno-0-534></a><span class=sd> # HttpResponse(content=..., status=201, headers=...)</span>
|
||
<a id=__codelineno-0-535 name=__codelineno-0-535></a><span class=sd> ```</span>
|
||
<a id=__codelineno-0-536 name=__codelineno-0-536></a><span class=sd> """</span>
|
||
<a id=__codelineno-0-537 name=__codelineno-0-537></a> <span class=n>content</span> <span class=o>=</span> <span class=bp>cls</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
||
<a id=__codelineno-0-538 name=__codelineno-0-538></a> <span class=n>args</span><span class=o>=</span><span class=n>args</span><span class=p>,</span>
|
||
<a id=__codelineno-0-539 name=__codelineno-0-539></a> <span class=n>kwargs</span><span class=o>=</span><span class=n>kwargs</span><span class=p>,</span>
|
||
<a id=__codelineno-0-540 name=__codelineno-0-540></a> <span class=n>context</span><span class=o>=</span><span class=n>context</span><span class=p>,</span>
|
||
<a id=__codelineno-0-541 name=__codelineno-0-541></a> <span class=n>slots</span><span class=o>=</span><span class=n>slots</span><span class=p>,</span>
|
||
<a id=__codelineno-0-542 name=__codelineno-0-542></a> <span class=n>escape_slots_content</span><span class=o>=</span><span class=n>escape_slots_content</span><span class=p>,</span>
|
||
<a id=__codelineno-0-543 name=__codelineno-0-543></a> <span class=nb>type</span><span class=o>=</span><span class=nb>type</span><span class=p>,</span>
|
||
<a id=__codelineno-0-544 name=__codelineno-0-544></a> <span class=n>render_dependencies</span><span class=o>=</span><span class=kc>True</span><span class=p>,</span>
|
||
<a id=__codelineno-0-545 name=__codelineno-0-545></a> <span class=p>)</span>
|
||
<a id=__codelineno-0-546 name=__codelineno-0-546></a> <span class=k>return</span> <span class=bp>cls</span><span class=o>.</span><span class=n>response_class</span><span class=p>(</span><span class=n>content</span><span class=p>,</span> <span class=o>*</span><span class=n>response_args</span><span class=p>,</span> <span class=o>**</span><span class=n>response_kwargs</span><span class=p>)</span>
|
||
</code></pre></div></td></tr></table></div> </details> </div> </div> </div> </div> </div> </div> </div> </div> </article> </div> <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> Back to top </button> </main> <footer class=md-footer> <nav class="md-footer__inner md-grid" aria-label=Footer> <a href=../ class="md-footer__link md-footer__link--prev" aria-label="Previous: Index"> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class=md-footer__title> <span class=md-footer__direction> Previous </span> <div class=md-ellipsis> Index </div> </div> </a> <a href=../../context/ class="md-footer__link md-footer__link--next" aria-label='Next: <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> context'> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> context </div> </div> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener> Material for MkDocs </a> </div> <div class=md-social> <a href=https://github.com/EmilStenstrom/django-components target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> <a href=https://pypi.org/project/django-components/ target=_blank rel=noopener title=pypi.org class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 448 512"><!-- Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6M286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3M167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4m-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <div class=md-progress data-md-component=progress role=progressbar></div> <script id=__config type=application/json>{"base": "../../../..", "features": ["content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tabs.link", "navigation.expand", "navigation.footer", "navigation.instant", "navigation.instant.progress", "navigation.indexes", "navigation.sections", "navigation.tracking", "navigation.top", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../../../assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"alias": true, "default": ["dev"], "provider": "mike"}}</script> <script src=../../../../assets/javascripts/bundle.83f73b43.min.js></script> <script src=../../../../assets/_markdown_exec_pyodide.js></script> <script src=../../../../js/timeago.min.js></script> <script src=../../../../js/timeago_mkdocs_material.js></script> </body> </html> |