Comments (10)
I think this just needs a decision on whether to implement the minor change or not.
I don't know if x-
attributes are widely used elsewhere and changing the behaviour of x-
attributes would cause a namespace clash, so I'd want to see some research that before adding it. I suspect not, but I think it's worth a check.
from templ.
Glad you have a temporary workaround.
I did notice that a lot of people use
script
components when there's no obvious need to, I think the documentation may have over-emphasized them, so I've added a new section into the docs so that this is the first thing you see on https://templ.guide/syntax-and-usage/script-templates/templ body() { <script type="text/javascript"> function handleClick(event) { alert(event + ' clicked'); } </script> <button onclick="handleClick(this)">Click me</button> }
I think of script templates as a way for bundling JS along with component libraries, and a way of passing data from Go to JS, rather than them being the standard way to write JS in templ.
i see, script templates improve readability and look nicer in my opinion. and i think generated function names that start with __templ
might prevent clashes with some other global js functions?
like you mentioned, they also allow passing data from go to javascript, which i am using (although not in the example i gave above) to pass server-side state to client-side alpinejs state with the onx-
prefix. i think script templates have the potential to be useful and improve readability in templ code.
all aside, thank you for your interest on the matter. i love my current experience with templ so far :)
from templ.
i've found a temporary workaround for this feature:
it is kind of a hacky solution, but the feature above can be achieved by changing the Alpine.js prefix to onx-
add this to your head tag:
<script>
function changeAlpinePrefix() {
Alpine.prefix("onx-");
Alpine.start();
}
window.onload = changeAlpinePrefix;
</script>
now you can use:
templ Index() {
<div onx-data={alpineState()}>
<div>time: <span onx-text="time" /></div>
</div>
}
script alpineState() {
return {
"time": Date.now()
}
}
from templ.
Glad you have a temporary workaround.
I did notice that a lot of people use script
components when there's no obvious need to, I think the documentation may have over-emphasized them, so I've added a new section into the docs so that this is the first thing you see on https://templ.guide/syntax-and-usage/script-templates/
templ body() {
<script type="text/javascript">
function handleClick(event) {
alert(event + ' clicked');
}
</script>
<button onclick="handleClick(this)">Click me</button>
}
I think of script templates as a way for bundling JS along with component libraries, and a way of passing data from Go to JS, rather than them being the standard way to write JS in templ.
from templ.
I also just ran into this issue today. I want to populate my x-data
attribute with data passed in from Go. I guess the hack provided means that I would have to use the onx-
prefix for everything in Alpinejs?
In my opinion I think the easiest fix is to just remove the random letters and numbers generated on the javascript function and just making it __templ_{functionName}
. Then it can be called directly without any issues.
from templ.
Here is another hack solution I came up with.
<script>
function getTemplFunction(name) {
for ( var i in window) {
if((typeof window[i]).toString()=="function"){
if (i.includes("__templ_" + name)) {
return window[i];
}
}
}
}
</script>
Then I can use x-data="getTemplFunction('functionName')()"
Edit: Actually this didn't work, since it's not possible to pass data into the function then. I found this alternative solution below which did work.
script myScriptName(data string) {
window.myScriptName = function() {
... do whatever is needed with `data`
}
}
then you can use x-data="myScriptName()"
like usual.
from templ.
I also just ran into this issue today. I want to populate my
x-data
attribute with data passed in from Go. I guess the hack provided means that I would have to use theonx-
prefix for everything in Alpinejs?In my opinion I think the easiest fix is to just remove the random letters and numbers generated on the javascript function and just making it
__templ_{functionName}
. Then it can be called directly without any issues.
the prefix needs to start with on
for the templ compiler to recognize it, so in my case i used onx-
.
from templ.
I also just ran into this issue today. I want to populate my
x-data
attribute with data passed in from Go. I guess the hack provided means that I would have to use theonx-
prefix for everything in Alpinejs?In my opinion I think the easiest fix is to just remove the random letters and numbers generated on the javascript function and just making it
__templ_{functionName}
. Then it can be called directly without any issues.
the prefix needs to start with on
for the templ compiler to recognize it, so in my case i used onx-
.
from templ.
my two cents: while I'm also interested in using Alpine with templ, I feel that this should be an opt-in feature, perhaps a full-blown setting to set the prefix(es).
from templ.
I believe we now have a standard for passing serverside data to the client here: https://templ.guide/syntax-and-usage/script-templates#passing-server-side-data-to-scripts
And in the case of using alpine functions it looks like there is a workaround to get started.
That combined with the recommendation away from script templates I think we can close this.
from templ.
Related Issues (20)
- Investigate issue raised in vscode-go HOT 1
- LSP: Autocomplete seems broken HOT 2
- VS Code: Request textDocument/codeAction failed. HOT 1
- docs: TailwindCSS setup autocomplete no longer work HOT 8
- Vscode plugin crash HOT 4
- [question] go 1.22 iterators / rangefunc HOT 3
- Release `v0.2.731` breaks Mason.nvim integration HOT 5
- using context with implicit vs explicit import HOT 3
- Error with VSCode: Request textDocument/codeAction failed HOT 2
- LSP on Vscode Broken HOT 4
- Templ gopls functionality seems to still be broken with gopls `v0.16.x` and does not work with gopls `v0.15.3` anymore HOT 3
- Language server seg fault on VSCode HOT 13
- Deeply nested structs / maps are inaccessible and unusable - Ex data.Form.FieldErrors.NewEmail undefined (type validator.FieldErrors has no field or method NewEmail) HOT 5
- bug: "github.com/a-h/templ/runtime" imported as templruntime and not used HOT 2
- Getting this error while using the latest version or templ and gopls HOT 11
- Formatting a parameterized javascript function HOT 3
- Templ config for passsing additional variables to component HOT 1
- Proxy not ready, retrying infinitely HOT 2
- Improved dev flow HOT 1
- Proposal: Introduce JsGenericVar for Event and Element Access in element event handlers HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from templ.