mirror of
https://github.com/Django-LiveView/docs.git
synced 2024-12-23 03:15:36 +01:00
Add routing
This commit is contained in:
parent
050b662d51
commit
caefd89dec
76
one.org
76
one.org
@ -385,6 +385,82 @@ You can use the ~sync_to_async~ function from ~asgiref~.
|
|||||||
|
|
||||||
Or transform ~articles~ to a list. But you lose the benefits of ORM.
|
Or transform ~articles~ to a list. But you lose the benefits of ORM.
|
||||||
|
|
||||||
|
* Routing
|
||||||
|
:PROPERTIES:
|
||||||
|
:ONE: one-custom-default-doc
|
||||||
|
:CUSTOM_ID: /docs/routing/
|
||||||
|
:TITLE: Routing
|
||||||
|
:DESCRIPTION: Routing of Django LiveView.
|
||||||
|
:END:
|
||||||
|
|
||||||
|
If you want to move from one page to another, you can use the ~page~ controller and the ~changePage~ action.
|
||||||
|
|
||||||
|
For example, you can create a link to the ~about me~ page.
|
||||||
|
|
||||||
|
#+BEGIN_SRC html
|
||||||
|
<a
|
||||||
|
data-controller="page"
|
||||||
|
data-action="click->page#changePage"
|
||||||
|
data-page="about_me"
|
||||||
|
href="{% url "about me" %}" <!-- Optional -->
|
||||||
|
role="button" <!-- Optional -->
|
||||||
|
>Ver completo</a>
|
||||||
|
#+END_SRC
|
||||||
|
|
||||||
|
- ~data-controller~: Indicates that the element is a controller. ~page~ with functions to switch between pages.
|
||||||
|
- ~data-action~: Indicates that the element is an action. ~click~ to capture the click event. ~page#changePage~ to call the ~changePage~ function of the ~page~ controller.
|
||||||
|
- ~data-page~: Indicates the name of the page to which you want to move. The name is the same as the name of the action file. For example, ~actions/about_me.py~.
|
||||||
|
- ~href~: Optional. It is recommended to use the ~href~ attribute to improve SEO or if JavaScript is disabled.
|
||||||
|
- ~role~: Optional. It is recommended to use the ~role~ attribute to improve accessibility or if JavaScript is disabled.
|
||||||
|
|
||||||
|
** Send data
|
||||||
|
|
||||||
|
If you want to send data to the next page, you can use the ~data-~ attribute. All datasets will be sent.
|
||||||
|
|
||||||
|
For example, you can create a link to the ~blog single~ page with the ~slug~ of the article.
|
||||||
|
|
||||||
|
#+BEGIN_SRC html
|
||||||
|
<a
|
||||||
|
data-controller="page"
|
||||||
|
data-action="click->page#changePage"
|
||||||
|
data-page="blog_single"
|
||||||
|
data-slug="{{ article.slug }}"
|
||||||
|
href="{% url "blog single" slug=article.slug %}" <!-- Optional -->
|
||||||
|
role="button" <!-- Optional -->
|
||||||
|
>Ver completo</a>
|
||||||
|
#+END_SRC
|
||||||
|
|
||||||
|
To receive the data in action ~blog_single.py~ you can use the ~client_data~ parameter with the ~data~ key.
|
||||||
|
|
||||||
|
#+BEGIN_SRC python
|
||||||
|
@enable_lang
|
||||||
|
@loading
|
||||||
|
async def send_page(consumer, client_data, lang=None):
|
||||||
|
slug = client_data["data"]["slug"]
|
||||||
|
# ...
|
||||||
|
#+END_SRC
|
||||||
|
|
||||||
|
Here you can see a typical example of a single page of a blog.
|
||||||
|
|
||||||
|
#+BEGIN_SRC python
|
||||||
|
@enable_lang
|
||||||
|
@loading
|
||||||
|
async def send_page(consumer, client_data, lang=None):
|
||||||
|
# Nav
|
||||||
|
await update_active_nav(consumer, "blog")
|
||||||
|
# Main
|
||||||
|
my_context = await get_context(consumer=consumer, slug=client_data["data"]["slug"])
|
||||||
|
html = await get_html(template, my_context)
|
||||||
|
data = {
|
||||||
|
"action": client_data["action"],
|
||||||
|
"selector": "#main",
|
||||||
|
"html": html,
|
||||||
|
}
|
||||||
|
data.update(my_context)
|
||||||
|
await consumer.send_html(data)
|
||||||
|
#+END_SRC
|
||||||
|
|
||||||
|
|
||||||
* Deploy
|
* Deploy
|
||||||
:PROPERTIES:
|
:PROPERTIES:
|
||||||
:ONE: one-custom-default-doc
|
:ONE: one-custom-default-doc
|
||||||
|
2
onerc.el
2
onerc.el
@ -152,6 +152,8 @@
|
|||||||
(:a.nav-docs__link (@ :href "/docs/quickstart/") "Quickstart"))
|
(:a.nav-docs__link (@ :href "/docs/quickstart/") "Quickstart"))
|
||||||
(:li.nav-docs__item
|
(:li.nav-docs__item
|
||||||
(:a.nav-docs__link (@ :href "/docs/views/") "Views"))
|
(:a.nav-docs__link (@ :href "/docs/views/") "Views"))
|
||||||
|
(:li.nav-docs__item
|
||||||
|
(:a.nav-docs__link (@ :href "/docs/routing/") "Routing"))
|
||||||
(:li.nav-docs__item
|
(:li.nav-docs__item
|
||||||
(:a.nav-docs__link (@ :href "/docs/deploy/") "Deploy"))
|
(:a.nav-docs__link (@ :href "/docs/deploy/") "Deploy"))
|
||||||
(:li.nav-docs__item
|
(:li.nav-docs__item
|
||||||
|
Loading…
Reference in New Issue
Block a user