Closed bob2517 closed 1 year ago
I'm calling this option json().
Instead of this:
@component address-field privateVars {
&:beforeComponentOpen {
ajax: "/get-address-data.php" post-pars(id={@host:person});
}
html {
<h2>Title: {{title}}</h2>
<p>Address: {{address}}</p>
}
}
You will be able to do this and it will preload fully and in theory avoid any flicker at render point:
@component address-field
json(/get-address-data.php post post-pars(id={@person}))
privateVars
{
html {
<h2>Title: {title}</h2>
<p>Address: {address}</p>
}
}
It goes without saying that html() and css() will work alongside it.
How would this be in context?
ACSS:
@component address-field json(/get-address-data.php post post-pars(id={@person})) privateVars {
HTML:
<body>
<address-field>
<h2>Title: {{person.title}}</h2>
<p>Address: {{person.address}}</p>
</address-field>
</body>
It's based on the example from this page: https://activecss.org/manual/component-ajax.html
Where the component tag itself looks like this:
<address-field person="1"></address-field>
When the component loads, the "person" attribute from the tag is used as the id.
It's a good method to use if you have a fixed data structure that will always have something in them.
There were double-curlies on the original example because variables need to automatically update on the page after the ajax command had finally loaded, and that was always after the component had been drawn on the page.
With the new example reactive variables are no longer needed, because the variables will be ready by the time the component gets drawn. In the original method, the component would render first, and then update the variables on the page when the ajax had loaded, so there was always a slight flicker. There won't be any flicker with this new method.
It's just one of many ways to use components. The components that I write often have ajax commands in beforeComponentOpen, so it seemed worth doing. It's not the new way - it just makes a specific use case better. The other ways to use components are just as valid.
Now on the branch.
Closing in preparation for release.
Dunno why I didn't think of this one earlier.
Loading JSON data into a component is a common thing. There could be an option in the \@component statement, like the new "html" and "css" options, that loads JSON and evaluates variables, etc. before the component renders. Thereby avoiding flicker while things load up.
I'm going to get 2.10.0 done first and that will be part of the next release.