mirror of
https://github.com/bigskysoftware/hypermedia-systems.git
synced 2025-12-04 00:05:18 -05:00
code annotation fixes for Ivan
This commit is contained in:
parent
e5254a5e1b
commit
b922b9bf4f
@ -298,7 +298,7 @@ Let's look at the first few lines of code in our `index.html` template:
|
||||
----
|
||||
<1> Set the layout template for this template
|
||||
<2> Delimit the content to be inserted into the layout
|
||||
<3> Create a search form that will issue an HTTP `GET` to the `/contacts` page
|
||||
<3> Create a search form that will issue an HTTP `GET` to `/contacts`
|
||||
<4> Create an input that a query can be typed into to search contacts
|
||||
|
||||
The first line of code references a base template, `layout.html`, with the `extends` directive. This layout
|
||||
@ -347,9 +347,9 @@ Here is what the template code looks like:
|
||||
</tbody>
|
||||
</table>
|
||||
----
|
||||
<1> We output some headers for our table
|
||||
<2> We iterate over the contacts that were passed in to the template
|
||||
<3> We output the values of the current contact, first name, last name, etc. in columns
|
||||
<1> Output some headers for our table
|
||||
<2> Iterate over the contacts that were passed in to the template
|
||||
<3> Output the values of the current contact, first name, last name, etc.
|
||||
<4> An "operations" column, with links to edit or view the contact details
|
||||
|
||||
Here we are into the core of the page: we construct a table with appropriate headers matching the data we are going
|
||||
@ -376,7 +376,7 @@ Finally, we have a bit of end-matter: a link to add a new contact and a directiv
|
||||
|
||||
{% endblock %} <2>
|
||||
----
|
||||
<1> A link to the page that allows you to create a new contact
|
||||
<1> Link to the page that allows you to create a new contact
|
||||
<2> The closing element of the `content` block
|
||||
|
||||
And that's our template! Using this server side template, in combination with our handler method, we can respond with
|
||||
@ -413,8 +413,8 @@ Here is our code:
|
||||
def contacts_new_get():
|
||||
return render_template("new.html", contact=Contact()) <2>
|
||||
----
|
||||
<1> We declare a route, explicitly handling `GET` requests to this path
|
||||
<2> We render the `new.html` template, passing in a new contact object
|
||||
<1> Declare a route, explicitly handling `GET` requests to this path
|
||||
<2> Render the `new.html` template, passing in a new contact object
|
||||
|
||||
Pretty simple! We just render a `new.html` template with, well, a new Contact, as you might expect!
|
||||
(Note that `Contact()` is the python syntax for creating a new instance of the `Contact` class.)
|
||||
@ -440,7 +440,7 @@ Here is what our HTML looks like:
|
||||
<span class="error">{{ contact.errors['email'] }}</span> <4>
|
||||
</p>
|
||||
----
|
||||
<1> A form that will submit to the `/contacts/new` path, using an HTTP `POST` request
|
||||
<1> A form that submits to the `/contacts/new` path, using an HTTP `POST`
|
||||
<2> A label for the first form input
|
||||
<3> the first form input, of type email
|
||||
<4> Any error messages associated with this field
|
||||
@ -521,7 +521,7 @@ def contacts_new():
|
||||
----
|
||||
<1> We construct a new contact object with the values from the form
|
||||
<2> We try to save it
|
||||
<3> On success, "flash" a success message and redirect back to the `/contacts` page
|
||||
<3> On success, "flash" a success message & redirect to the `/contacts` page
|
||||
<4> On failure, rerender the form, showing any errors to the user
|
||||
|
||||
|
||||
@ -769,7 +769,7 @@ def contacts_edit_post(contact_id=0):
|
||||
<2> Look the contact up by id
|
||||
<3> update the contact with the new information from the form
|
||||
<4> Attempt to save it
|
||||
<5> On success, flash a success message and redirect to the contacts detail page
|
||||
<5> On success, flash a success message & redirect to the detail page
|
||||
<6> On failure, rerender the edit template, showing any errors
|
||||
|
||||
The logic in this handler is very similar to the logic in the handler for adding a new contact. The only real difference
|
||||
|
||||
@ -345,7 +345,7 @@ Let's add a `div` tag that encloses the button with the id `main`. We will then
|
||||
</div>
|
||||
----
|
||||
<1> A `div` element that wraps the button
|
||||
<2> A new `hx-target` attribute that specifies the `div` as the target of the response
|
||||
<2> The `hx-target` attribute that specifies the target of the response
|
||||
|
||||
We have added `hx-target="#main"` to our button, where `#main` is a CSS selector that says "The thing with the ID 'main'".
|
||||
Note that by using CSS selectors, htmx is once again building on top of familiar and standard HTML concepts. By doing
|
||||
@ -545,7 +545,7 @@ To fix the first issue, lets use a trigger filter:
|
||||
|
||||
</div>
|
||||
----
|
||||
<1> A trigger with an added filter, specifying that the control key and L must be pressed
|
||||
<1> `keyup` now has a filter, so the control key and L must be pressed
|
||||
|
||||
The trigger filter in this case is `ctrlKey && key == 'l'`. This can be read as "A key up event, where the ctrlKey property
|
||||
is true and the key property is equal to 'l'". Note that the properties `ctrlKey` and `key` are resolved against the event
|
||||
@ -655,7 +655,7 @@ Let's take our original button for retrieving contacts and repurpose it for sear
|
||||
|
||||
</div>
|
||||
----
|
||||
<1> With an enclosing form tag, all inputs will be submitted with the button's request
|
||||
<1> With an enclosing form tag, all inputs values will be submitted
|
||||
<2> A new input that users will be able to enter search text into
|
||||
<3> Our button has been converted to an `hx-post`
|
||||
|
||||
@ -693,7 +693,7 @@ Here is the above example reworked to include the input, dropping the form:
|
||||
|
||||
<label for="search">Search Contacts:</label>
|
||||
<input id="search" name="q" type="search" placeholder="Search Contacts">
|
||||
<button hx-post="/contacts" hx-target="#main" hx-include="#search"><1>
|
||||
<button hx-post="/contacts" hx-target="#main" hx-include="#search"> <1>
|
||||
Search The Contacts
|
||||
</button>
|
||||
|
||||
@ -794,7 +794,7 @@ attribute to the button, `hx-push-url`:
|
||||
.Our trusty button, now with history!
|
||||
[source,html]
|
||||
----
|
||||
<button hx-get="/contacts" hx-target="#main" hx-push-url="true"><1>
|
||||
<button hx-get="/contacts" hx-target="#main" hx-push-url="true"> <1>
|
||||
Get The Contacts
|
||||
</button>
|
||||
----
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user