bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
37.75k stars 1.28k forks source link

Need help getting mustache to fire #135

Closed fils closed 4 years ago

fils commented 4 years ago

So far I have been able to get calls made and rewrite input for GraphQL. However, trying to deal with the JSON returned has stopped me.

I reviewed issue 49 (https://github.com/bigskysoftware/htmx/issues/49) and made my attempt at:

https://gist.github.com/fils/55cdfd1b6f6fab5b1b1a42ab78d9ff4f

Question: Do I need to include mustache.js (line 13 of gist) ?

My logic (such that it is) is at lines 70-86 copied below.

Question: Does hx-target reference id with # where mustache-template uses the base name and pre-pends the #?

The main question though is why this never seems to error (I don't get a template not found) but also never seems to work.

Any help would be appreciated!

As an aside.. it is possible to just rewrite the response with something like lit-html similar to how I rewrite the request with the document.body.addEventListener('htmx:configRequest', function(evt) { ... at the bottom of the gist.

code from the above gist...

<input class="form-control" type="text" 
       name="query" placeholder="Type to Search..." 
       hx-get="https://api.geodex.org/query" 
       hx-ext="client-side-templates"
       hx-trigger="keyup changed delay:1000ms" 
       hx-target="#search-results" 
       mustache-template="results-template"
       hx-indicator=".htmx-indicator">

 <div id="search-results"  hx-ext="client-side-templates"></div>  
<script id="results-template" type="x-tmpl-mustache">
{{#data}}
  {{#dos}}
    {{name}}
  {{/dos}}
{{/data}}
</script>
fils commented 4 years ago

I think I resolved it. I had not loaded the extension .js (https://unpkg.com/htmx.org@0.0.7/dist/ext/client-side-templates.js) into the page.

very pleased with this package.. thanks much

1cg commented 4 years ago

glad to hear you got it working