mirror of
https://github.com/django-components/django-components.git
synced 2025-08-18 21:20:14 +00:00
Deployed 1e4b556 to dev with MkDocs 1.6.1 and mike 2.1.3
This commit is contained in:
github-actions
parent
d527e10af5
commit
952396ba51
41 changed files with 482 additions and 465 deletions
|
|
@ -2,16 +2,16 @@
|
|||
</code></pre></div> <p>NOTE: <code>{% csrf_token %}</code> tags need access to the top-level context, and they will not function properly if they are rendered in a component that is called with the <code>only</code> modifier.</p> <p>If you find yourself using the <code>only</code> modifier often, you can set the <a href=#context-behavior>context_behavior</a> option to <code>"isolated"</code>, which automatically applies the <code>only</code> modifier. This is useful if you want to make sure that components don't accidentally access the outer context.</p> <p>Components can also access the outer context in their context methods like <code>get_context_data</code> by accessing the property <code>self.outer_context</code>.</p> <h2 id=example-of-accessing-outer-context>Example of Accessing Outer Context<a class=headerlink href=#example-of-accessing-outer-context title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=x><div></span>
|
||||
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calender"</span> <span class=o>/</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=x></div></span>
|
||||
</code></pre></div> <p>Assuming that the rendering context has variables such as <code>date</code>, you can use <code>self.outer_context</code> to access them from within <code>get_context_data</code>. Here's how you might implement it:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span> <span class=nc>Calender</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
</code></pre></div> <p>Assuming that the rendering context has variables such as <code>date</code>, you can use <code>self.outer_context</code> to access them from within <code>get_context_data</code>. Here's how you might implement it:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>Calender</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a>
|
||||
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=o>...</span>
|
||||
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a>
|
||||
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></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-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
||||
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=n>outer_field</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>outer_context</span><span class=p>[</span><span class=s2>"date"</span><span class=p>]</span>
|
||||
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=k>return</span> <span class=p>{</span>
|
||||
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a> <span class=s2>"date"</span><span class=p>:</span> <span class=n>outer_fields</span><span class=p>,</span>
|
||||
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a> <span class=p>}</span>
|
||||
</code></pre></div> <p>However, as a best practice, it’s recommended not to rely on accessing the outer context directly through <code>self.outer_context</code>. Instead, explicitly pass the variables to the component. For instance, continue passing the variables in the component tag as shown in the previous examples.</p> <h2 id=context-behavior>Context behavior<a class=headerlink href=#context-behavior title="Permanent link">¤</a></h2> <p>django_components supports both Django and Vue-like behavior when it comes to passing data to and through components. This can be configured in <a href=../../../reference/settings#context_behavior>context_behavior</a>.</p> <p>This has two modes:</p> <ul> <li> <p><code>"django"</code></p> <p>The default Django template behavior.</p> <p>Inside the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag, the context variables you can access are a union of:</p> <ul> <li>All the variables that were OUTSIDE the fill tag, including any\ <a href=https://docs.djangoproject.com/en/5.1/ref/templates/builtins/#with><code>{% with %}</code></a> tags.</li> <li>Any loops (<a href=https://docs.djangoproject.com/en/5.1/ref/templates/builtins/#cycle><code>{% for ... %}</code></a>) that the <code>{% fill %}</code> tag is part of.</li> <li>Data returned from <a href=../../../reference/api#django_components.Component.get_context_data><code>Component.get_context_data()</code></a> of the component that owns the fill tag.</li> </ul> </li> <li> <p><code>"isolated"</code></p> <p>Similar behavior to <a href=https://vuejs.org/guide/components/slots.html#render-scope>Vue</a> or React, this is useful if you want to make sure that components don't accidentally access variables defined outside of the component.</p> <p>Inside the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag, you can ONLY access variables from 2 places:</p> <ul> <li>Any loops (<a href=https://docs.djangoproject.com/en/5.1/ref/templates/builtins/#cycle><code>{% for ... %}</code></a>) that the <code>{% fill %}</code> tag is part of.</li> <li><a href=../../../reference/api#django_components.Component.get_context_data><code>Component.get_context_data()</code></a> of the component which defined the template (AKA the "root" component).</li> </ul> </li> </ul> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Notice that the component whose <code>get_context_data()</code> we use inside <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> is NOT the same across the two modes!</p> <p>Consider this example:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>class</span> <span class=nc>Outer</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
</code></pre></div> <p>However, as a best practice, it’s recommended not to rely on accessing the outer context directly through <code>self.outer_context</code>. Instead, explicitly pass the variables to the component. For instance, continue passing the variables in the component tag as shown in the previous examples.</p> <h2 id=context-behavior>Context behavior<a class=headerlink href=#context-behavior title="Permanent link">¤</a></h2> <p>django_components supports both Django and Vue-like behavior when it comes to passing data to and through components. This can be configured in <a href=../../../reference/settings#context_behavior>context_behavior</a>.</p> <p>This has two modes:</p> <ul> <li> <p><code>"django"</code></p> <p>The default Django template behavior.</p> <p>Inside the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag, the context variables you can access are a union of:</p> <ul> <li>All the variables that were OUTSIDE the fill tag, including any\ <a href=https://docs.djangoproject.com/en/5.1/ref/templates/builtins/#with><code>{% with %}</code></a> tags.</li> <li>Any loops (<a href=https://docs.djangoproject.com/en/5.1/ref/templates/builtins/#cycle><code>{% for ... %}</code></a>) that the <code>{% fill %}</code> tag is part of.</li> <li>Data returned from <a href=../../../reference/api#django_components.Component.get_context_data><code>Component.get_context_data()</code></a> of the component that owns the fill tag.</li> </ul> </li> <li> <p><code>"isolated"</code></p> <p>Similar behavior to <a href=https://vuejs.org/guide/components/slots.html#render-scope>Vue</a> or React, this is useful if you want to make sure that components don't accidentally access variables defined outside of the component.</p> <p>Inside the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag, you can ONLY access variables from 2 places:</p> <ul> <li>Any loops (<a href=https://docs.djangoproject.com/en/5.1/ref/templates/builtins/#cycle><code>{% for ... %}</code></a>) that the <code>{% fill %}</code> tag is part of.</li> <li><a href=../../../reference/api#django_components.Component.get_context_data><code>Component.get_context_data()</code></a> of the component which defined the template (AKA the "root" component).</li> </ul> </li> </ul> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Notice that the component whose <code>get_context_data()</code> we use inside <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> is NOT the same across the two modes!</p> <p>Consider this example:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>class</span><span class=w> </span><span class=nc>Outer</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=n>template</span> <span class=o>=</span> \<span class=s2>"</span><span class=se>\"\"</span>
|
||||
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=o><</span><span class=n>div</span><span class=o>></span>
|
||||
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=p>{</span><span class=o>%</span> <span class=n>component</span> <span class=s2>"inner"</span> <span class=o>%</span><span class=p>}</span>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a> <span class=o></</span><span class=n>div</span><span class=o>></span>
|
||||
<a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a> \<span class=s2>"</span><span class=se>\"\"</span>
|
||||
</code></pre></div> <ul> <li> <p><code>"django"</code> - <code>my_var</code> has access to data from <code>get_context_data()</code> of both <code>Inner</code> and <code>Outer</code>. If there are variables defined in both, then <code>Inner</code> overshadows <code>Outer</code>.</p> </li> <li> <p><code>"isolated"</code> - <code>my_var</code> has access to data from <code>get_context_data()</code> of ONLY <code>Outer</code>.</p> </li> </ul> </div> <h3 id=example-django>Example "django"<a class=headerlink href=#example-django title="Permanent link">¤</a></h3> <p>Given this template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"root_comp"</span><span class=p>)</span>
|
||||
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a><span class=k>class</span> <span class=nc>RootComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a><span class=k>class</span><span class=w> </span><span class=nc>RootComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"""</span>
|
||||
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a><span class=s2> {% with cheese="feta" %}</span>
|
||||
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent 'my_comp' %}</span>
|
||||
|
|
@ -32,12 +32,12 @@
|
|||
<a id=__codelineno-4-9 name=__codelineno-4-9 href=#__codelineno-4-9></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndwith %}</span>
|
||||
<a id=__codelineno-4-10 name=__codelineno-4-10 href=#__codelineno-4-10></a><span class=s2> """</span>
|
||||
<a id=__codelineno-4-11 name=__codelineno-4-11 href=#__codelineno-4-11></a>
|
||||
<a id=__codelineno-4-12 name=__codelineno-4-12 href=#__codelineno-4-12></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-4-12 name=__codelineno-4-12 href=#__codelineno-4-12></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
||||
<a id=__codelineno-4-13 name=__codelineno-4-13 href=#__codelineno-4-13></a> <span class=k>return</span> <span class=p>{</span> <span class=s2>"my_var"</span><span class=p>:</span> <span class=mi>123</span> <span class=p>}</span>
|
||||
</code></pre></div> <p>Then if <a href=../../../reference/api#django_components.Component.get_context_data><code>get_context_data()</code></a> of the component <code>"my_comp"</code> returns following data:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=p>{</span> <span class=s2>"my_var"</span><span class=p>:</span> <span class=mi>456</span> <span class=p>}</span>
|
||||
</code></pre></div> <p>Then the template will be rendered as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=x>456 # my_var</span>
|
||||
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a><span class=x>feta # cheese</span>
|
||||
</code></pre></div> <p>Because <code>"my_comp"</code> overshadows the outer variable <code>"my_var"</code>, so <code>{{ my_var }}</code> equals <code>456</code>.</p> <p>And variable <code>"cheese"</code> equals <code>feta</code>, because the fill CAN access all the data defined in the outer layers, like the <code>{% with %}</code> tag.</p> <h3 id=example-isolated>Example "isolated"<a class=headerlink href=#example-isolated title="Permanent link">¤</a></h3> <p>Given this template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=k>class</span> <span class=nc>RootComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
</code></pre></div> <p>Because <code>"my_comp"</code> overshadows the outer variable <code>"my_var"</code>, so <code>{{ my_var }}</code> equals <code>456</code>.</p> <p>And variable <code>"cheese"</code> equals <code>feta</code>, because the fill CAN access all the data defined in the outer layers, like the <code>{% with %}</code> tag.</p> <h3 id=example-isolated>Example "isolated"<a class=headerlink href=#example-isolated title="Permanent link">¤</a></h3> <p>Given this template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=k>class</span><span class=w> </span><span class=nc>RootComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"""</span>
|
||||
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=s2> {% with cheese="feta" %}</span>
|
||||
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent 'my_comp' %}</span>
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndwith %}</span>
|
||||
<a id=__codelineno-7-9 name=__codelineno-7-9 href=#__codelineno-7-9></a><span class=s2> """</span>
|
||||
<a id=__codelineno-7-10 name=__codelineno-7-10 href=#__codelineno-7-10></a>
|
||||
<a id=__codelineno-7-11 name=__codelineno-7-11 href=#__codelineno-7-11></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-7-11 name=__codelineno-7-11 href=#__codelineno-7-11></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
||||
<a id=__codelineno-7-12 name=__codelineno-7-12 href=#__codelineno-7-12></a> <span class=k>return</span> <span class=p>{</span> <span class=s2>"my_var"</span><span class=p>:</span> <span class=mi>123</span> <span class=p>}</span>
|
||||
</code></pre></div> <p>Then if <a href=../../../reference/api#django_components.Component.get_context_data><code>get_context_data()</code></a> of the component <code>"my_comp"</code> returns following data:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=p>{</span> <span class=s2>"my_var"</span><span class=p>:</span> <span class=mi>456</span> <span class=p>}</span>
|
||||
</code></pre></div> <p>Then the template will be rendered as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=x>123 # my_var</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue