Django-LiveView/docs
1
0
Fork 0
mirror of https://github.com/Django-LiveView/docs.git synced 2024-12-23 03:15:36 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Andros Fenollosa 2024-03-19 17:09:00 +01:00
parent afd567fa46
commit ea21007d5e
1 changed files with 52 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
one.org
View File

@ -427,7 +427,6 @@ For example, you can create a link to the ~blog single~ page with the ~slug~ of
#+BEGIN_SRC html #+BEGIN_SRC html
<a <a
data-controller="page"
data-action="click->page#changePage" data-action="click->page#changePage"
data-page="blog_single" data-page="blog_single"
data-slug="{{ article.slug }}" data-slug="{{ article.slug }}"
@ -796,10 +795,10 @@ Now we will create the base template, which will be the one that will be rendere
Create a folder called ~templates~, or use your template folder, inside your App and inside it create another folder called ~layouts~. Now create a file called ~base.html~. Create a folder called ~templates~, or use your template folder, inside your App and inside it create another folder called ~layouts~. Now create a file called ~base.html~.
#+BEGIN_SRC html #+BEGIN_SRC html
{# my-app/templates/layouts/base.html #} {# my-app/templates/layouts/base.html #}
{% load static i18n %} {% load static i18n %}
<!doctype html>{% get_current_language as CURRENT_LANGUAGE %} <!doctype html>{% get_current_language as CURRENT_LANGUAGE %}
<html lang="{{ CURRENT_LANGUAGE }}"> <html lang="{{ CURRENT_LANGUAGE }}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>{{ title }}</title> <title>{{ title }}</title>
@ -820,6 +819,7 @@ Create a folder called ~templates~, or use your template folder, inside your App
<body <body
data-host="{{ request.get_host }}" data-host="{{ request.get_host }}"
data-debug="{{ DEBUG }}" data-debug="{{ DEBUG }}"
data-controller="page"
> >
<section id="loading"></section> <section id="loading"></section>
<section id="notifications" class="notifications"></section> <section id="notifications" class="notifications"></section>
@ -834,7 +834,7 @@ Create a folder called ~templates~, or use your template folder, inside your App
</footer> </footer>
</div> </div>
</body> </body>
</html> </html>
#+END_SRC #+END_SRC
In the future we will define ~main.js~, a minimal JavaScript to connect the events and the WebSockets client. In the future we will define ~main.js~, a minimal JavaScript to connect the events and the WebSockets client.
@ -846,15 +846,19 @@ We will create the home page template, which will be the one that will be render
Create a folder called ~pages~ in your template folder and inside it create a file called ~home.html~. Create a folder called ~pages~ in your template folder and inside it create a file called ~home.html~.
#+BEGIN_SRC html #+BEGIN_SRC html
{# my-app/templates/pages/home.html #} {# my-app/templates/pages/home.html #}
{% load static %} {% load static %}
<main data-controller="home"> <main>
<p> <p>
<button data-action="click->home#randomNumber">Random number</button> <button
data-action="click->page#run"
data-liveview-action="home"
data-liveview-function="random_number"
>Generate random number</button>
</p> </p>
<h2 id="output-random-number"></h2> <h2 id="output-random-number"></h2>
</main> </main>
#+END_SRC #+END_SRC
As you can see, we have defined a button to launch the action of generating the random number (~button~) and the place where we will print the result (~output-random-number~). As you can see, we have defined a button to launch the action of generating the random number (~button~) and the place where we will print the result (~output-random-number~).