mirror of
https://github.com/django-components/django-components.git
synced 2025-08-19 05:30:17 +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
|
|
@ -12,8 +12,8 @@
|
|||
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> |-- templatetags/
|
||||
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> |-- __init__.py
|
||||
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> |-- mytags.py
|
||||
</code></pre></div> </li> <li> <p>Create custom <a href=https://docs.djangoproject.com/en/5.1/howto/custom-template-tags/#how-to-create-custom-template-tags-and-filters><code>Library</code></a> and <a href=django_components.component_registry.ComponentRegistry><code>ComponentRegistry</code></a> instances in <code>mytags.py</code></p> <p>This will be the entrypoint for using the components inside Django templates.</p> <p>Remember that Django requires the <a href=https://docs.djangoproject.com/en/5.1/howto/custom-template-tags/#how-to-create-custom-template-tags-and-filters><code>Library</code></a> instance to be accessible under the <code>register</code> variable (<a href=https://docs.djangoproject.com/en/dev/howto/custom-template-tags>See Django docs</a>):</p> <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.template</span> <span class=kn>import</span> <span class=n>Library</span>
|
||||
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>ComponentRegistry</span><span class=p>,</span> <span class=n>RegistrySettings</span>
|
||||
</code></pre></div> </li> <li> <p>Create custom <a href=https://docs.djangoproject.com/en/5.1/howto/custom-template-tags/#how-to-create-custom-template-tags-and-filters><code>Library</code></a> and <a href=django_components.component_registry.ComponentRegistry><code>ComponentRegistry</code></a> instances in <code>mytags.py</code></p> <p>This will be the entrypoint for using the components inside Django templates.</p> <p>Remember that Django requires the <a href=https://docs.djangoproject.com/en/5.1/howto/custom-template-tags/#how-to-create-custom-template-tags-and-filters><code>Library</code></a> instance to be accessible under the <code>register</code> variable (<a href=https://docs.djangoproject.com/en/dev/howto/custom-template-tags>See Django docs</a>):</p> <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=w> </span><span class=nn>django.template</span><span class=w> </span><span class=kn>import</span> <span class=n>Library</span>
|
||||
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentRegistry</span><span class=p>,</span> <span class=n>RegistrySettings</span>
|
||||
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a>
|
||||
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=n>register</span> <span class=o>=</span> <span class=n>library</span> <span class=o>=</span> <span class=n>django</span><span class=o>.</span><span class=n>template</span><span class=o>.</span><span class=n>Library</span><span class=p>()</span>
|
||||
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=n>comp_registry</span> <span class=o>=</span> <span class=n>ComponentRegistry</span><span class=p>(</span>
|
||||
|
|
@ -36,22 +36,22 @@
|
|||
<a id=__codelineno-4-7 name=__codelineno-4-7 href=#__codelineno-4-7></a><span class=c>{# User-created components using the default settings #}</span>
|
||||
<a id=__codelineno-4-8 name=__codelineno-4-8 href=#__codelineno-4-8></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_comp"</span> <span class=nv>title</span><span class=o>=</span><span class=s2>"Abc..."</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-4-9 name=__codelineno-4-9 href=#__codelineno-4-9></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||||
</code></pre></div> </li> <li> <p>Write your components and register them with your instance of <a href=../../reference/api#ComponentRegistry><code>ComponentRegistry</code></a></p> <p>There's one difference when you are writing components that are to be shared, and that's that the components must be explicitly registered with your instance of <a href=../../reference/api#ComponentRegistry><code>ComponentRegistry</code></a> from the previous step.</p> <p>For better user experience, you can also define the types for the args, kwargs, slots and data.</p> <p>It's also a good idea to have a common prefix for your components, so they can be easily distinguished from users' components. In the example below, we use the prefix <code>my_</code> / <code>My</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=kn>from</span> <span class=nn>typing</span> <span class=kn>import</span> <span class=n>Dict</span><span class=p>,</span> <span class=n>NotRequired</span><span class=p>,</span> <span class=n>Optional</span><span class=p>,</span> <span class=n>Tuple</span><span class=p>,</span> <span class=n>TypedDict</span>
|
||||
</code></pre></div> </li> <li> <p>Write your components and register them with your instance of <a href=../../reference/api#ComponentRegistry><code>ComponentRegistry</code></a></p> <p>There's one difference when you are writing components that are to be shared, and that's that the components must be explicitly registered with your instance of <a href=../../reference/api#ComponentRegistry><code>ComponentRegistry</code></a> from the previous step.</p> <p>For better user experience, you can also define the types for the args, kwargs, slots and data.</p> <p>It's also a good idea to have a common prefix for your components, so they can be easily distinguished from users' components. In the example below, we use the prefix <code>my_</code> / <code>My</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>Dict</span><span class=p>,</span> <span class=n>NotRequired</span><span class=p>,</span> <span class=n>Optional</span><span class=p>,</span> <span class=n>Tuple</span><span class=p>,</span> <span class=n>TypedDict</span>
|
||||
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a>
|
||||
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></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>SlotFunc</span><span class=p>,</span> <span class=n>register</span><span class=p>,</span> <span class=n>types</span>
|
||||
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>SlotFunc</span><span class=p>,</span> <span class=n>register</span><span class=p>,</span> <span class=n>types</span>
|
||||
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a>
|
||||
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a><span class=kn>from</span> <span class=nn>myapp.templatetags.mytags</span> <span class=kn>import</span> <span class=n>comp_registry</span>
|
||||
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a><span class=kn>from</span><span class=w> </span><span class=nn>myapp.templatetags.mytags</span><span class=w> </span><span class=kn>import</span> <span class=n>comp_registry</span>
|
||||
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a>
|
||||
<a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a><span class=c1># Define the types</span>
|
||||
<a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a><span class=k>class</span> <span class=nc>EmptyDict</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
|
||||
<a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a><span class=k>class</span><span class=w> </span><span class=nc>EmptyDict</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
|
||||
<a id=__codelineno-5-9 name=__codelineno-5-9 href=#__codelineno-5-9></a> <span class=k>pass</span>
|
||||
<a id=__codelineno-5-10 name=__codelineno-5-10 href=#__codelineno-5-10></a>
|
||||
<a id=__codelineno-5-11 name=__codelineno-5-11 href=#__codelineno-5-11></a><span class=nb>type</span> <span class=n>MyMenuArgs</span> <span class=o>=</span> <span class=n>Tuple</span><span class=p>[</span><span class=nb>int</span><span class=p>,</span> <span class=nb>str</span><span class=p>]</span>
|
||||
<a id=__codelineno-5-12 name=__codelineno-5-12 href=#__codelineno-5-12></a>
|
||||
<a id=__codelineno-5-13 name=__codelineno-5-13 href=#__codelineno-5-13></a><span class=k>class</span> <span class=nc>MyMenuSlots</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
|
||||
<a id=__codelineno-5-13 name=__codelineno-5-13 href=#__codelineno-5-13></a><span class=k>class</span><span class=w> </span><span class=nc>MyMenuSlots</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
|
||||
<a id=__codelineno-5-14 name=__codelineno-5-14 href=#__codelineno-5-14></a> <span class=n>default</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=n>Optional</span><span class=p>[</span><span class=n>SlotFunc</span><span class=p>[</span><span class=n>EmptyDict</span><span class=p>]]]</span>
|
||||
<a id=__codelineno-5-15 name=__codelineno-5-15 href=#__codelineno-5-15></a>
|
||||
<a id=__codelineno-5-16 name=__codelineno-5-16 href=#__codelineno-5-16></a><span class=k>class</span> <span class=nc>MyMenuProps</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
|
||||
<a id=__codelineno-5-16 name=__codelineno-5-16 href=#__codelineno-5-16></a><span class=k>class</span><span class=w> </span><span class=nc>MyMenuProps</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
|
||||
<a id=__codelineno-5-17 name=__codelineno-5-17 href=#__codelineno-5-17></a> <span class=n>vertical</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=nb>bool</span><span class=p>]</span>
|
||||
<a id=__codelineno-5-18 name=__codelineno-5-18 href=#__codelineno-5-18></a> <span class=n>klass</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span>
|
||||
<a id=__codelineno-5-19 name=__codelineno-5-19 href=#__codelineno-5-19></a> <span class=n>style</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span>
|
||||
|
|
@ -59,8 +59,8 @@
|
|||
<a id=__codelineno-5-21 name=__codelineno-5-21 href=#__codelineno-5-21></a><span class=c1># Define the component</span>
|
||||
<a id=__codelineno-5-22 name=__codelineno-5-22 href=#__codelineno-5-22></a><span class=c1># NOTE: Don't forget to set the `registry`!</span>
|
||||
<a id=__codelineno-5-23 name=__codelineno-5-23 href=#__codelineno-5-23></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"my_menu"</span><span class=p>,</span> <span class=n>registry</span><span class=o>=</span><span class=n>comp_registry</span><span class=p>)</span>
|
||||
<a id=__codelineno-5-24 name=__codelineno-5-24 href=#__codelineno-5-24></a><span class=k>class</span> <span class=nc>MyMenu</span><span class=p>(</span><span class=n>Component</span><span class=p>[</span><span class=n>MyMenuArgs</span><span class=p>,</span> <span class=n>MyMenuProps</span><span class=p>,</span> <span class=n>MyMenuSlots</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>
|
||||
<a id=__codelineno-5-25 name=__codelineno-5-25 href=#__codelineno-5-25></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span>
|
||||
<a id=__codelineno-5-24 name=__codelineno-5-24 href=#__codelineno-5-24></a><span class=k>class</span><span class=w> </span><span class=nc>MyMenu</span><span class=p>(</span><span class=n>Component</span><span class=p>[</span><span class=n>MyMenuArgs</span><span class=p>,</span> <span class=n>MyMenuProps</span><span class=p>,</span> <span class=n>MyMenuSlots</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>
|
||||
<a id=__codelineno-5-25 name=__codelineno-5-25 href=#__codelineno-5-25></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span>
|
||||
<a id=__codelineno-5-26 name=__codelineno-5-26 href=#__codelineno-5-26></a> <span class=bp>self</span><span class=p>,</span>
|
||||
<a id=__codelineno-5-27 name=__codelineno-5-27 href=#__codelineno-5-27></a> <span class=o>*</span><span class=n>args</span><span class=p>,</span>
|
||||
<a id=__codelineno-5-28 name=__codelineno-5-28 href=#__codelineno-5-28></a> <span class=n>attrs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Dict</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
||||
|
|
@ -79,18 +79,18 @@
|
|||
<a id=__codelineno-5-41 name=__codelineno-5-41 href=#__codelineno-5-41></a><span class=s2> </div></span>
|
||||
<a id=__codelineno-5-42 name=__codelineno-5-42 href=#__codelineno-5-42></a><span class=s2> </div></span>
|
||||
<a id=__codelineno-5-43 name=__codelineno-5-43 href=#__codelineno-5-43></a><span class=s2> """</span>
|
||||
</code></pre></div> </li> <li> <p>Import the components in <code>apps.py</code></p> <p>Normally, users rely on <a href=../../concepts/autodiscovery>autodiscovery</a> and <a href=../../reference/settings#dirs><code>COMPONENTS.dirs</code></a> to load the component files.</p> <p>Since you, as the library author, are not in control of the file system, it is recommended to load the components manually.</p> <p>We recommend doing this in the <a href=https://docs.djangoproject.com/en/5.1/ref/applications/#django.apps.AppConfig.ready><code>AppConfig.ready()</code></a> hook of your <code>apps.py</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=kn>from</span> <span class=nn>django.apps</span> <span class=kn>import</span> <span class=n>AppConfig</span>
|
||||
</code></pre></div> </li> <li> <p>Import the components in <code>apps.py</code></p> <p>Normally, users rely on <a href=../../concepts/autodiscovery>autodiscovery</a> and <a href=../../reference/settings#dirs><code>COMPONENTS.dirs</code></a> to load the component files.</p> <p>Since you, as the library author, are not in control of the file system, it is recommended to load the components manually.</p> <p>We recommend doing this in the <a href=https://docs.djangoproject.com/en/5.1/ref/applications/#django.apps.AppConfig.ready><code>AppConfig.ready()</code></a> hook of your <code>apps.py</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.apps</span><span class=w> </span><span class=kn>import</span> <span class=n>AppConfig</span>
|
||||
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a>
|
||||
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a><span class=k>class</span> <span class=nc>MyAppConfig</span><span class=p>(</span><span class=n>AppConfig</span><span class=p>):</span>
|
||||
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyAppConfig</span><span class=p>(</span><span class=n>AppConfig</span><span class=p>):</span>
|
||||
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a> <span class=n>default_auto_field</span> <span class=o>=</span> <span class=s2>"django.db.models.BigAutoField"</span>
|
||||
<a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"myapp"</span>
|
||||
<a id=__codelineno-6-6 name=__codelineno-6-6 href=#__codelineno-6-6></a>
|
||||
<a id=__codelineno-6-7 name=__codelineno-6-7 href=#__codelineno-6-7></a> <span class=c1># This is the code that gets run when user adds myapp</span>
|
||||
<a id=__codelineno-6-8 name=__codelineno-6-8 href=#__codelineno-6-8></a> <span class=c1># to Django's INSTALLED_APPS</span>
|
||||
<a id=__codelineno-6-9 name=__codelineno-6-9 href=#__codelineno-6-9></a> <span class=k>def</span> <span class=nf>ready</span><span class=p>(</span><span class=bp>self</span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
||||
<a id=__codelineno-6-9 name=__codelineno-6-9 href=#__codelineno-6-9></a> <span class=k>def</span><span class=w> </span><span class=nf>ready</span><span class=p>(</span><span class=bp>self</span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
||||
<a id=__codelineno-6-10 name=__codelineno-6-10 href=#__codelineno-6-10></a> <span class=c1># Import the components that you want to make available</span>
|
||||
<a id=__codelineno-6-11 name=__codelineno-6-11 href=#__codelineno-6-11></a> <span class=c1># inside the templates.</span>
|
||||
<a id=__codelineno-6-12 name=__codelineno-6-12 href=#__codelineno-6-12></a> <span class=kn>from</span> <span class=nn>myapp.templates</span> <span class=kn>import</span> <span class=p>(</span>
|
||||
<a id=__codelineno-6-12 name=__codelineno-6-12 href=#__codelineno-6-12></a> <span class=kn>from</span><span class=w> </span><span class=nn>myapp.templates</span><span class=w> </span><span class=kn>import</span> <span class=p>(</span>
|
||||
<a id=__codelineno-6-13 name=__codelineno-6-13 href=#__codelineno-6-13></a> <span class=n>menu</span><span class=p>,</span>
|
||||
<a id=__codelineno-6-14 name=__codelineno-6-14 href=#__codelineno-6-14></a> <span class=n>table</span><span class=p>,</span>
|
||||
<a id=__codelineno-6-15 name=__codelineno-6-15 href=#__codelineno-6-15></a> <span class=p>)</span>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -12,11 +12,11 @@
|
|||
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span><span class=o>...</span><span class=p>},</span>
|
||||
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=nb>type</span><span class=o>=</span><span class=s2>"fragment"</span><span class=p>,</span>
|
||||
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=p>)</span>
|
||||
</code></pre></div> <h2 id=live-examples>Live examples<a class=headerlink href=#live-examples title="Permanent link">¤</a></h2> <p>For live interactive examples, <a href=../../../overview/development/#developing-against-live-django-app>start our demo project</a> (<code>sampleproject</code>).</p> <p>Then navigate to these URLs:</p> <ul> <li><code>/fragment/base/alpine</code></li> <li><code>/fragment/base/htmx</code></li> <li><code>/fragment/base/js</code></li> </ul> <h2 id=example-htmx>Example - HTMX<a class=headerlink href=#example-htmx title="Permanent link">¤</a></h2> <h3 id=1-define-document-html>1. Define document HTML<a class=headerlink href=#1-define-document-html title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-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>types</span>
|
||||
</code></pre></div> <h2 id=live-examples>Live examples<a class=headerlink href=#live-examples title="Permanent link">¤</a></h2> <p>For live interactive examples, <a href=../../../overview/development/#developing-against-live-django-app>start our demo project</a> (<code>sampleproject</code>).</p> <p>Then navigate to these URLs:</p> <ul> <li><code>/fragment/base/alpine</code></li> <li><code>/fragment/base/htmx</code></li> <li><code>/fragment/base/js</code></li> </ul> <h2 id=example-htmx>Example - HTMX<a class=headerlink href=#example-htmx title="Permanent link">¤</a></h2> <h3 id=1-define-document-html>1. Define document HTML<a class=headerlink href=#1-define-document-html title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</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=c1># HTML into which a fragment will be loaded using HTMX</span>
|
||||
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=k>class</span> <span class=nc>MyPage</span><span class=p>(</span><span class=n>Component</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=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
||||
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyPage</span><span class=p>(</span><span class=n>Component</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</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
||||
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span>
|
||||
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a>
|
||||
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"""</span>
|
||||
|
|
@ -42,8 +42,8 @@
|
|||
<a id=__codelineno-2-28 name=__codelineno-2-28 href=#__codelineno-2-28></a><span class=s2> </body></span>
|
||||
<a id=__codelineno-2-29 name=__codelineno-2-29 href=#__codelineno-2-29></a><span class=s2> </html></span>
|
||||
<a id=__codelineno-2-30 name=__codelineno-2-30 href=#__codelineno-2-30></a><span class=s2> """</span>
|
||||
</code></pre></div> <h3 id=2-define-fragment-html>2. Define fragment HTML<a class=headerlink href=#2-define-fragment-html title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><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>Frag</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=k>def</span> <span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
||||
</code></pre></div> <h3 id=2-define-fragment-html>2. Define fragment HTML<a class=headerlink href=#2-define-fragment-html title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><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>Frag</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=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
||||
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
|
||||
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=c1># IMPORTANT: Don't forget `type="fragment"`</span>
|
||||
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=nb>type</span><span class=o>=</span><span class=s2>"fragment"</span><span class=p>,</span>
|
||||
|
|
@ -65,19 +65,19 @@
|
|||
<a id=__codelineno-3-21 name=__codelineno-3-21 href=#__codelineno-3-21></a><span class=s2> background: blue;</span>
|
||||
<a id=__codelineno-3-22 name=__codelineno-3-22 href=#__codelineno-3-22></a><span class=s2> }</span>
|
||||
<a id=__codelineno-3-23 name=__codelineno-3-23 href=#__codelineno-3-23></a><span class=s2> """</span>
|
||||
</code></pre></div> <h3 id=3-create-view-and-urls>3. Create view and URLs<a class=headerlink href=#3-create-view-and-urls title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[app]/urls.py</span><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=kn>from</span> <span class=nn>django.urls</span> <span class=kn>import</span> <span class=n>path</span>
|
||||
</code></pre></div> <h3 id=3-create-view-and-urls>3. Create view and URLs<a class=headerlink href=#3-create-view-and-urls title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[app]/urls.py</span><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.urls</span><span class=w> </span><span class=kn>import</span> <span class=n>path</span>
|
||||
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a>
|
||||
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a><span class=kn>from</span> <span class=nn>components.demo</span> <span class=kn>import</span> <span class=n>MyPage</span><span class=p>,</span> <span class=n>Frag</span>
|
||||
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a><span class=kn>from</span><span class=w> </span><span class=nn>components.demo</span><span class=w> </span><span class=kn>import</span> <span class=n>MyPage</span><span class=p>,</span> <span class=n>Frag</span>
|
||||
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a>
|
||||
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a><span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span>
|
||||
<a id=__codelineno-4-6 name=__codelineno-4-6 href=#__codelineno-4-6></a> <span class=n>path</span><span class=p>(</span><span class=s2>"mypage/"</span><span class=p>,</span> <span class=n>MyPage</span><span class=o>.</span><span class=n>as_view</span><span class=p>())</span>
|
||||
<a id=__codelineno-4-7 name=__codelineno-4-7 href=#__codelineno-4-7></a> <span class=n>path</span><span class=p>(</span><span class=s2>"mypage/frag"</span><span class=p>,</span> <span class=n>Frag</span><span class=o>.</span><span class=n>as_view</span><span class=p>()),</span>
|
||||
<a id=__codelineno-4-8 name=__codelineno-4-8 href=#__codelineno-4-8></a><span class=p>]</span>
|
||||
</code></pre></div> <h2 id=example-alpinejs>Example - AlpineJS<a class=headerlink href=#example-alpinejs title="Permanent link">¤</a></h2> <h3 id=1-define-document-html_1>1. Define document HTML<a class=headerlink href=#1-define-document-html_1 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-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>types</span>
|
||||
</code></pre></div> <h2 id=example-alpinejs>Example - AlpineJS<a class=headerlink href=#example-alpinejs title="Permanent link">¤</a></h2> <h3 id=1-define-document-html_1>1. Define document HTML<a class=headerlink href=#1-define-document-html_1 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</span>
|
||||
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a>
|
||||
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=c1># HTML into which a fragment will be loaded using AlpineJS</span>
|
||||
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a><span class=k>class</span> <span class=nc>MyPage</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a> <span class=k>def</span> <span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
||||
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyPage</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
||||
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span>
|
||||
<a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a>
|
||||
<a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"""</span>
|
||||
|
|
@ -109,8 +109,8 @@
|
|||
<a id=__codelineno-5-34 name=__codelineno-5-34 href=#__codelineno-5-34></a><span class=s2> </body></span>
|
||||
<a id=__codelineno-5-35 name=__codelineno-5-35 href=#__codelineno-5-35></a><span class=s2> </html></span>
|
||||
<a id=__codelineno-5-36 name=__codelineno-5-36 href=#__codelineno-5-36></a><span class=s2> """</span>
|
||||
</code></pre></div> <h3 id=2-define-fragment-html_1>2. Define fragment HTML<a class=headerlink href=#2-define-fragment-html_1 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=k>class</span> <span class=nc>Frag</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a> <span class=k>def</span> <span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
||||
</code></pre></div> <h3 id=2-define-fragment-html_1>2. Define fragment HTML<a class=headerlink href=#2-define-fragment-html_1 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=k>class</span><span class=w> </span><span class=nc>Frag</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
||||
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a> <span class=c1># IMPORTANT: Don't forget `type="fragment"`</span>
|
||||
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
|
||||
<a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a> <span class=nb>type</span><span class=o>=</span><span class=s2>"fragment"</span><span class=p>,</span>
|
||||
|
|
@ -145,19 +145,19 @@
|
|||
<a id=__codelineno-6-34 name=__codelineno-6-34 href=#__codelineno-6-34></a><span class=s2> background: blue;</span>
|
||||
<a id=__codelineno-6-35 name=__codelineno-6-35 href=#__codelineno-6-35></a><span class=s2> }</span>
|
||||
<a id=__codelineno-6-36 name=__codelineno-6-36 href=#__codelineno-6-36></a><span class=s2> """</span>
|
||||
</code></pre></div> <h3 id=3-create-view-and-urls_1>3. Create view and URLs<a class=headerlink href=#3-create-view-and-urls_1 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[app]/urls.py</span><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=kn>from</span> <span class=nn>django.urls</span> <span class=kn>import</span> <span class=n>path</span>
|
||||
</code></pre></div> <h3 id=3-create-view-and-urls_1>3. Create view and URLs<a class=headerlink href=#3-create-view-and-urls_1 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[app]/urls.py</span><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.urls</span><span class=w> </span><span class=kn>import</span> <span class=n>path</span>
|
||||
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a>
|
||||
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=kn>from</span> <span class=nn>components.demo</span> <span class=kn>import</span> <span class=n>MyPage</span><span class=p>,</span> <span class=n>Frag</span>
|
||||
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=kn>from</span><span class=w> </span><span class=nn>components.demo</span><span class=w> </span><span class=kn>import</span> <span class=n>MyPage</span><span class=p>,</span> <span class=n>Frag</span>
|
||||
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a>
|
||||
<a id=__codelineno-7-5 name=__codelineno-7-5 href=#__codelineno-7-5></a><span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span>
|
||||
<a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a> <span class=n>path</span><span class=p>(</span><span class=s2>"mypage/"</span><span class=p>,</span> <span class=n>MyPage</span><span class=o>.</span><span class=n>as_view</span><span class=p>())</span>
|
||||
<a id=__codelineno-7-7 name=__codelineno-7-7 href=#__codelineno-7-7></a> <span class=n>path</span><span class=p>(</span><span class=s2>"mypage/frag"</span><span class=p>,</span> <span class=n>Frag</span><span class=o>.</span><span class=n>as_view</span><span class=p>()),</span>
|
||||
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a><span class=p>]</span>
|
||||
</code></pre></div> <h2 id=example-vanilla-js>Example - Vanilla JS<a class=headerlink href=#example-vanilla-js title="Permanent link">¤</a></h2> <h3 id=1-define-document-html_2>1. Define document HTML<a class=headerlink href=#1-define-document-html_2 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-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>types</span>
|
||||
</code></pre></div> <h2 id=example-vanilla-js>Example - Vanilla JS<a class=headerlink href=#example-vanilla-js title="Permanent link">¤</a></h2> <h3 id=1-define-document-html_2>1. Define document HTML<a class=headerlink href=#1-define-document-html_2 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</span>
|
||||
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a>
|
||||
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a><span class=c1># HTML into which a fragment will be loaded using JS</span>
|
||||
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a><span class=k>class</span> <span class=nc>MyPage</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a> <span class=k>def</span> <span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyPage</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
||||
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span>
|
||||
<a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a>
|
||||
<a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"""</span>
|
||||
|
|
@ -188,8 +188,8 @@
|
|||
<a id=__codelineno-8-33 name=__codelineno-8-33 href=#__codelineno-8-33></a><span class=s2> </body></span>
|
||||
<a id=__codelineno-8-34 name=__codelineno-8-34 href=#__codelineno-8-34></a><span class=s2> </html></span>
|
||||
<a id=__codelineno-8-35 name=__codelineno-8-35 href=#__codelineno-8-35></a><span class=s2> """</span>
|
||||
</code></pre></div> <h3 id=2-define-fragment-html_2>2. Define fragment HTML<a class=headerlink href=#2-define-fragment-html_2 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=k>class</span> <span class=nc>Frag</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-9-2 name=__codelineno-9-2 href=#__codelineno-9-2></a> <span class=k>def</span> <span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
||||
</code></pre></div> <h3 id=2-define-fragment-html_2>2. Define fragment HTML<a class=headerlink href=#2-define-fragment-html_2 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=k>class</span><span class=w> </span><span class=nc>Frag</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-9-2 name=__codelineno-9-2 href=#__codelineno-9-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
||||
<a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
|
||||
<a id=__codelineno-9-4 name=__codelineno-9-4 href=#__codelineno-9-4></a> <span class=c1># IMPORTANT: Don't forget `type="fragment"`</span>
|
||||
<a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a> <span class=nb>type</span><span class=o>=</span><span class=s2>"fragment"</span><span class=p>,</span>
|
||||
|
|
@ -211,9 +211,9 @@
|
|||
<a id=__codelineno-9-21 name=__codelineno-9-21 href=#__codelineno-9-21></a><span class=s2> background: blue;</span>
|
||||
<a id=__codelineno-9-22 name=__codelineno-9-22 href=#__codelineno-9-22></a><span class=s2> }</span>
|
||||
<a id=__codelineno-9-23 name=__codelineno-9-23 href=#__codelineno-9-23></a><span class=s2> """</span>
|
||||
</code></pre></div> <h3 id=3-create-view-and-urls_2>3. Create view and URLs<a class=headerlink href=#3-create-view-and-urls_2 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[app]/urls.py</span><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=kn>from</span> <span class=nn>django.urls</span> <span class=kn>import</span> <span class=n>path</span>
|
||||
</code></pre></div> <h3 id=3-create-view-and-urls_2>3. Create view and URLs<a class=headerlink href=#3-create-view-and-urls_2 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[app]/urls.py</span><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.urls</span><span class=w> </span><span class=kn>import</span> <span class=n>path</span>
|
||||
<a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a>
|
||||
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a><span class=kn>from</span> <span class=nn>components.demo</span> <span class=kn>import</span> <span class=n>MyPage</span><span class=p>,</span> <span class=n>Frag</span>
|
||||
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a><span class=kn>from</span><span class=w> </span><span class=nn>components.demo</span><span class=w> </span><span class=kn>import</span> <span class=n>MyPage</span><span class=p>,</span> <span class=n>Frag</span>
|
||||
<a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a>
|
||||
<a id=__codelineno-10-5 name=__codelineno-10-5 href=#__codelineno-10-5></a><span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span>
|
||||
<a id=__codelineno-10-6 name=__codelineno-10-6 href=#__codelineno-10-6></a> <span class=n>path</span><span class=p>(</span><span class=s2>"mypage/"</span><span class=p>,</span> <span class=n>MyPage</span><span class=o>.</span><span class=n>as_view</span><span class=p>())</span>
|
||||
|
|
|
|||
|
|
@ -10,25 +10,25 @@
|
|||
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=x> ...</span>
|
||||
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=cp>{%</span> <span class=k>provide</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=x></table></span>
|
||||
</code></pre></div> <h2 id=using-inject-method>Using <code>inject()</code> method<a class=headerlink href=#using-inject-method title="Permanent link">¤</a></h2> <p>To "inject" (access) the data defined on the <code>provide</code> tag, you can use the <code>inject()</code> method inside of <code>get_context_data()</code>.</p> <p>For a component to be able to "inject" some data, the component (<code>{% component %}</code> tag) must be nested inside the <code>{% provide %}</code> tag.</p> <p>In the example from previous section, we've defined two kwargs: <code>key="hi" another=123</code>. That means that if we now inject <code>"my_data"</code>, we get an object with 2 attributes - <code>key</code> and <code>another</code>.</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>ChildComponent</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=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
||||
</code></pre></div> <h2 id=using-inject-method>Using <code>inject()</code> method<a class=headerlink href=#using-inject-method title="Permanent link">¤</a></h2> <p>To "inject" (access) the data defined on the <code>provide</code> tag, you can use the <code>inject()</code> method inside of <code>get_context_data()</code>.</p> <p>For a component to be able to "inject" some data, the component (<code>{% component %}</code> tag) must be nested inside the <code>{% provide %}</code> tag.</p> <p>In the example from previous section, we've defined two kwargs: <code>key="hi" another=123</code>. That means that if we now inject <code>"my_data"</code>, we get an object with 2 attributes - <code>key</code> and <code>another</code>.</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>ChildComponent</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=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-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=n>my_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>"my_data"</span><span class=p>)</span>
|
||||
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=nb>print</span><span class=p>(</span><span class=n>my_data</span><span class=o>.</span><span class=n>key</span><span class=p>)</span> <span class=c1># hi</span>
|
||||
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=nb>print</span><span class=p>(</span><span class=n>my_data</span><span class=o>.</span><span class=n>another</span><span class=p>)</span> <span class=c1># 123</span>
|
||||
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>return</span> <span class=p>{}</span>
|
||||
</code></pre></div> <p>First argument to <code>inject</code> is the <em>key</em> (or <em>name</em>) of the provided data. This must match the string that you used in the <code>provide</code> tag. If no provider with given key is found, <code>inject</code> raises a <code>KeyError</code>.</p> <p>To avoid the error, you can pass a second argument to <code>inject</code> to which will act as a default value, similar to <code>dict.get(key, default)</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=k>class</span> <span class=nc>ChildComponent</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>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
||||
</code></pre></div> <p>First argument to <code>inject</code> is the <em>key</em> (or <em>name</em>) of the provided data. This must match the string that you used in the <code>provide</code> tag. If no provider with given key is found, <code>inject</code> raises a <code>KeyError</code>.</p> <p>To avoid the error, you can pass a second argument to <code>inject</code> to which will act as a default value, similar to <code>dict.get(key, default)</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=k>class</span><span class=w> </span><span class=nc>ChildComponent</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>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-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=n>my_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>"invalid_key"</span><span class=p>,</span> <span class=n>DEFAULT_DATA</span><span class=p>)</span>
|
||||
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a> <span class=k>assert</span> <span class=n>my_data</span> <span class=o>==</span> <span class=n>DEFAUKT_DATA</span>
|
||||
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a> <span class=k>return</span> <span class=p>{}</span>
|
||||
</code></pre></div> <p>The instance returned from <code>inject()</code> is a subclass of <code>NamedTuple</code>, so the instance is immutable. This ensures that the data returned from <code>inject</code> will always have all the keys that were passed to the <code>provide</code> tag.</p> <blockquote> <p>NOTE: <code>inject()</code> works strictly only in <code>get_context_data</code>. If you try to call it from elsewhere, it will raise an error.</p> </blockquote> <h2 id=full-example>Full example<a class=headerlink href=#full-example title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"child"</span><span class=p>)</span>
|
||||
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a><span class=k>class</span> <span class=nc>ChildComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a><span class=k>class</span><span class=w> </span><span class=nc>ChildComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"""</span>
|
||||
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a><span class=s2> <div> {{ my_data.key }} </div></span>
|
||||
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a><span class=s2> <div> {{ my_data.another }} </div></span>
|
||||
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a><span class=s2> """</span>
|
||||
<a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a>
|
||||
<a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></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-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></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-5-9 name=__codelineno-5-9 href=#__codelineno-5-9></a> <span class=n>my_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>"my_data"</span><span class=p>,</span> <span class=s2>"default"</span><span class=p>)</span>
|
||||
<a id=__codelineno-5-10 name=__codelineno-5-10 href=#__codelineno-5-10></a> <span class=k>return</span> <span class=p>{</span><span class=s2>"my_data"</span><span class=p>:</span> <span class=n>my_data</span><span class=p>}</span>
|
||||
<a id=__codelineno-5-11 name=__codelineno-5-11 href=#__codelineno-5-11></a>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -30,13 +30,13 @@
|
|||
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a> <span class=n>tokens</span><span class=o>=</span><span class=p>[</span><span class=s1>'href="..."'</span><span class=p>,</span> <span class=s1>'disabled'</span><span class=p>]</span>
|
||||
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a><span class=p>)</span>
|
||||
</code></pre></div> <ol> <li>The tag handler resumes, using the tokens returned from <code>TagFormatter</code>.</li> </ol> <p>So, continuing the example, at this point the tag handler practically behaves as if you rendered:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=nv>href</span><span class=o>=</span><span class=s2>"..."</span> <span class=nv>disabled</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <ol> <li>Tag handler looks up the component <code>button</code>, and passes the args, kwargs, and slots to it.</li> </ol> <h3 id=tagformatter>TagFormatter<a class=headerlink href=#tagformatter title="Permanent link">¤</a></h3> <p><code>TagFormatter</code> handles following parts of the process above:</p> <ul> <li> <p>Generates start/end tags, given a component. This is what you then call from within your template as <code>{% component %}</code>.</p> </li> <li> <p>When you <code>{% component %}</code>, tag formatter pre-processes the tag contents, so it can link back the custom template tag to the right component.</p> </li> </ul> <p>To do so, subclass from <code>TagFormatterABC</code> and implement following method:</p> <ul> <li><code>start_tag</code></li> <li><code>end_tag</code></li> <li><code>parse</code></li> </ul> <p>For example, this is the implementation of <a href=#available-tagformatters><code>ShorthandComponentFormatter</code></a></p> <div class=highlight><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=k>class</span> <span class=nc>ShorthandComponentFormatter</span><span class=p>(</span><span class=n>TagFormatterABC</span><span class=p>):</span>
|
||||
</code></pre></div> <ol> <li>Tag handler looks up the component <code>button</code>, and passes the args, kwargs, and slots to it.</li> </ol> <h3 id=tagformatter>TagFormatter<a class=headerlink href=#tagformatter title="Permanent link">¤</a></h3> <p><code>TagFormatter</code> handles following parts of the process above:</p> <ul> <li> <p>Generates start/end tags, given a component. This is what you then call from within your template as <code>{% component %}</code>.</p> </li> <li> <p>When you <code>{% component %}</code>, tag formatter pre-processes the tag contents, so it can link back the custom template tag to the right component.</p> </li> </ul> <p>To do so, subclass from <code>TagFormatterABC</code> and implement following method:</p> <ul> <li><code>start_tag</code></li> <li><code>end_tag</code></li> <li><code>parse</code></li> </ul> <p>For example, this is the implementation of <a href=#available-tagformatters><code>ShorthandComponentFormatter</code></a></p> <div class=highlight><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=k>class</span><span class=w> </span><span class=nc>ShorthandComponentFormatter</span><span class=p>(</span><span class=n>TagFormatterABC</span><span class=p>):</span>
|
||||
<a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a> <span class=c1># Given a component name, generate the start template tag</span>
|
||||
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a> <span class=k>def</span> <span class=nf>start_tag</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span><span class=p>)</span> <span class=o>-></span> <span class=nb>str</span><span class=p>:</span>
|
||||
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a> <span class=k>def</span><span class=w> </span><span class=nf>start_tag</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span><span class=p>)</span> <span class=o>-></span> <span class=nb>str</span><span class=p>:</span>
|
||||
<a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a> <span class=k>return</span> <span class=n>name</span> <span class=c1># e.g. 'button'</span>
|
||||
<a id=__codelineno-10-5 name=__codelineno-10-5 href=#__codelineno-10-5></a>
|
||||
<a id=__codelineno-10-6 name=__codelineno-10-6 href=#__codelineno-10-6></a> <span class=c1># Given a component name, generate the start template tag</span>
|
||||
<a id=__codelineno-10-7 name=__codelineno-10-7 href=#__codelineno-10-7></a> <span class=k>def</span> <span class=nf>end_tag</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span><span class=p>)</span> <span class=o>-></span> <span class=nb>str</span><span class=p>:</span>
|
||||
<a id=__codelineno-10-7 name=__codelineno-10-7 href=#__codelineno-10-7></a> <span class=k>def</span><span class=w> </span><span class=nf>end_tag</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span><span class=p>)</span> <span class=o>-></span> <span class=nb>str</span><span class=p>:</span>
|
||||
<a id=__codelineno-10-8 name=__codelineno-10-8 href=#__codelineno-10-8></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>"end</span><span class=si>{</span><span class=n>name</span><span class=si>}</span><span class=s2>"</span> <span class=c1># e.g. 'endbutton'</span>
|
||||
<a id=__codelineno-10-9 name=__codelineno-10-9 href=#__codelineno-10-9></a>
|
||||
<a id=__codelineno-10-10 name=__codelineno-10-10 href=#__codelineno-10-10></a> <span class=c1># Given a tag, e.g.</span>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
<a id=__codelineno-10-12 name=__codelineno-10-12 href=#__codelineno-10-12></a> <span class=c1>#</span>
|
||||
<a id=__codelineno-10-13 name=__codelineno-10-13 href=#__codelineno-10-13></a> <span class=c1># The parser receives:</span>
|
||||
<a id=__codelineno-10-14 name=__codelineno-10-14 href=#__codelineno-10-14></a> <span class=c1># `['button', 'href="..."', 'disabled']`</span>
|
||||
<a id=__codelineno-10-15 name=__codelineno-10-15 href=#__codelineno-10-15></a> <span class=k>def</span> <span class=nf>parse</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>tokens</span><span class=p>:</span> <span class=n>List</span><span class=p>[</span><span class=nb>str</span><span class=p>])</span> <span class=o>-></span> <span class=n>TagResult</span><span class=p>:</span>
|
||||
<a id=__codelineno-10-15 name=__codelineno-10-15 href=#__codelineno-10-15></a> <span class=k>def</span><span class=w> </span><span class=nf>parse</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>tokens</span><span class=p>:</span> <span class=n>List</span><span class=p>[</span><span class=nb>str</span><span class=p>])</span> <span class=o>-></span> <span class=n>TagResult</span><span class=p>:</span>
|
||||
<a id=__codelineno-10-16 name=__codelineno-10-16 href=#__codelineno-10-16></a> <span class=n>tokens</span> <span class=o>=</span> <span class=p>[</span><span class=o>*</span><span class=n>tokens</span><span class=p>]</span>
|
||||
<a id=__codelineno-10-17 name=__codelineno-10-17 href=#__codelineno-10-17></a> <span class=n>name</span> <span class=o>=</span> <span class=n>tokens</span><span class=o>.</span><span class=n>pop</span><span class=p>(</span><span class=mi>0</span><span class=p>)</span>
|
||||
<a id=__codelineno-10-18 name=__codelineno-10-18 href=#__codelineno-10-18></a> <span class=k>return</span> <span class=n>TagResult</span><span class=p>(</span>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue