mirror of
				https://github.com/Django-LiveView/docs.git
				synced 2025-10-31 19:05:53 +01:00 
			
		
		
		
	Add routing
This commit is contained in:
		
							
								
								
									
										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. | ||||
|  | ||||
| * 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 | ||||
| :PROPERTIES: | ||||
| :ONE: one-custom-default-doc | ||||
|   | ||||
							
								
								
									
										2
									
								
								onerc.el
									
									
									
									
									
								
							
							
						
						
									
										2
									
								
								onerc.el
									
									
									
									
									
								
							| @@ -152,6 +152,8 @@ | ||||
| 		      (:a.nav-docs__link (@ :href "/docs/quickstart/") "Quickstart")) | ||||
| 		     (:li.nav-docs__item | ||||
| 		      (:a.nav-docs__link (@ :href "/docs/views/") "Views")) | ||||
| 		     (:li.nav-docs__item | ||||
| 		      (:a.nav-docs__link (@ :href "/docs/routing/") "Routing")) | ||||
| 		     (:li.nav-docs__item | ||||
| 		      (:a.nav-docs__link (@ :href "/docs/deploy/") "Deploy")) | ||||
| 		     (:li.nav-docs__item | ||||
|   | ||||
		Reference in New Issue
	
	Block a user