Django-LiveView/docs
1
0
Fork 0
mirror of https://github.com/Django-LiveView/docs.git synced 2024-12-22 19:05:35 +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

100
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,45 +795,46 @@ 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>
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
> >
<meta <meta
name="description" name="description"
content="{{ meta.description }}" content="{{ meta.description }}"
> >
<meta <meta
property="og:image" property="og:image"
content="{{ meta.image }}" content="{{ meta.image }}"
> >
<script type="module" src="{% static 'js/main.js' %}" defer></script> <script type="module" src="{% static 'js/main.js' %}" defer></script>
</head> </head>
<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="notifications" class="notifications"></section> <section id="loading"></section>
<section id="no_connection"></section> <section id="notifications" class="notifications"></section>
<div class="container"> <section id="no_connection"></section>
<header id="content-header"> <div class="container">
{% include 'components/header.html' %} <header id="content-header">
</header> {% include 'components/header.html' %}
<main id="main" class="main-container">{% include page %}</main> </header>
<footer id="content-footer"> <main id="main" class="main-container">{% include page %}</main>
{% include 'components/footer.html' %} <footer id="content-footer">
</footer> {% include 'components/footer.html' %}
</div> </footer>
</body> </div>
</html> </body>
</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
</p> data-action="click->page#run"
<h2 id="output-random-number"></h2> data-liveview-action="home"
</main> data-liveview-function="random_number"
>Generate random number</button>
</p>
<h2 id="output-random-number"></h2>
</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~).