Skip to content

Commit

Permalink
Update README.md to make client-side-templates examples work with v2 (#…
Browse files Browse the repository at this point in the history 
…88)

* Update README.md to make examples work with v2

* added link

* fix mustache example
  • Loading branch information
@barakplasma
barakplasma authored Sep 21, 2024
1 parent 3ccb0db commit f5c61d3
Showing 1 changed file with 54 additions and 24 deletions.
78 changes: 54 additions & 24 deletions src/client-side-templates/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,9 @@ a [`<template>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/t
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="htmx-config" content='{"selfRequestsOnly":false}'>
<title>JS Bin</title>
<script src="https://unpkg.com/htmx.org"></script>
<script src="https://unpkg.com/htmx.org@2.0.0"></script>
<script src="https://unpkg.com/htmx-ext-client-side-templates@2.0.0/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>
</head>
Expand All @@ -78,14 +79,13 @@ a [`<template>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/t
<p id="content">Start</p>

<template id="foo">
<p> {% raw %}{{userID}}{% endraw %} and {% raw %}{{id}}{% endraw %} and {% raw %}{{title}}{% endraw %} and {% raw %}{{completed}}{% endraw %}</p>
<p> {{userID}} and {{id}} and {{title}} and {{completed}}</p>
</template>
</div>
</body>
</html>
```

Here is a [jsbin](https://jsbin.com/qonutovico/edit?html,output) playground to try this out.
[demo (external link)](https://barakplasma.github.io/htmx-weather/mustache)

Here's a working example using the `mustache-array-template` working against an API that returns an array:
```html
Expand All @@ -94,6 +94,7 @@ Here's a working example using the `mustache-array-template` working against an
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="htmx-config" content='{"selfRequestsOnly":false}'>
<title>JS Bin</title>
<script src="https://unpkg.com/htmx.org"></script>
<script src="https://unpkg.com/htmx-ext-client-side-templates@2.0.0/client-side-templates.js"></script>
Expand All @@ -119,6 +120,7 @@ Here's a working example using the `mustache-array-template` working against an
</body>
</html>
```
[demo (external link)](https://barakplasma.github.io/htmx-weather/mustache-array)

### Full XSLT HTML Example

Expand All @@ -130,37 +132,62 @@ If you wish to put a template into another file, you can use a directive such as
Some styling is needed to keep the object visible while not taking any space.

```html
<!DOCTYPE html>
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://unpkg.com/htmx.org"></script>
<script src="https://unpkg.com/htmx-ext-client-side-templates@2.0.0/client-side-templates.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="htmx-config" content='{"selfRequestsOnly":false}'>
<title>Weather with htmx</title>
<link rel="stylesheet" href="https://unpkg.com/mvp.css@1.15.0/mvp.css" />
<script src="https://unpkg.com/htmx.org@2.0.2"></script>
<script src="https://unpkg.com/htmx-ext-client-side-templates@2.0.2/client-side-templates.js"></script>
</head>
<body>
<div hx-ext="client-side-templates">
<button hx-get="http://restapi.adequateshop.com/api/Traveler"
hx-swap="innerHTML"
hx-target="#content"
xslt-template="foo">
Click Me
</button>

<p id="content">Start</p>

<script id="foo" type="application/xml">
<body>
<script id="foo" type="application/xml">
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
page <xsl:value-of select="/TravelerinformationResponse/page" /> of <xsl:value-of select="/TravelerinformationResponse/total_pages" />
<xsl:template match="HourlyLocationsForecast">
<xsl:for-each select="Location">
<aside>
<h3>
<xsl:value-of select="LocationMetaData/LocationName" />
</h3>
<table>
<tr>
<th>time</th>
<th>temp</th>
<th>humidity</th>
</tr>
<xsl:for-each select="LocationData/Forecast">
<tr>
<td>
<xsl:value-of select="substring(ForecastTime, 9)" />
</td>
<td>
<xsl:value-of select="Temperature" /> °C
</td>
<td>
<xsl:value-of select="RelativeHumidity" />%
</td>
</tr>
</xsl:for-each>
</table>
</aside>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
</script>
</div>
<section hx-ext="client-side-templates" hx-trigger="load"
hx-get="https://proxy.cors.sh/https://ims.gov.il/sites/default/files/ims_data/xml_files/IMS_001.xml"
hx-swap="innerHTML" xslt-template="foo">waiting for data
</section>
</body>

</html>
```
[demo (external link)](https://barakplasma.github.io/htmx-weather/)


## CORS and REST/JSON
Expand All @@ -175,3 +202,6 @@ a frustrating surprise.
Unfortunately, the solution will vary depending on the provider of the web service. Depending on
what you are trying to do, you may find it easier to rely on your server-side framework to manage/proxy
these requests to 3rd parties services.

## selfRequestsOnly
[Since v2 of htmx](https://htmx.org/migration-guide-htmx-1/#:~:text=If%20you%20want%20to%20make%20cross%2Ddomain%20requests%20with%20htmx%2C%20revert%20htmx.config.selfRequestsOnly%20to%20false), requests to external domains are blocked by default. You can add the [selfRequestsOnly](https://htmx.org/reference/#:~:text=htmx.config.selfRequestsOnly) config (`<meta name="htmx-config" content='{"selfRequestsOnly":false}'>`) to allow requests to external domains to work.

0 comments on commit f5c61d3

Please sign in to comment.