squirrellyjs / squirrelly-docs

The new docs website for Squirrelly v7 and v8
https://squirrelly.js.org
2 stars 4 forks source link

docs/syntax/helpers #22

Open utterances-bot opened 3 years ago

utterances-bot commented 3 years ago

Helpers | SquirrellyJS

Helpers are an easy way to include logic within a template. Conditionals, looping, and partials are all implemented using helpers.

https://squirrelly.js.org/docs/syntax/helpers

ilanl commented 3 years ago

It's unclear what's the use here for blocks, also I'm missing the code that relates to this example.

ilanl commented 3 years ago

Can a self-closing helper return an array of values?

for example: data: { languageCodes: ["en", "fr", "es"] } {{@async helperTranslate(it.languageCodes) /}} would return ["English", "French", "Spanish"]

Can we nest the result of an helper with another helper? For example: {{@helperListAND({{@async helperTranslate(it.languageCodes) /}} ) /}}

nebrelbug commented 3 years ago

@ilanl you can't nest the result of a helper with another helper. In cases requiring complex logic like that, it's best to move all the logic inside one helper.

A self-closing helper can return an array of values, but it will be automatically turned into a string by Squirrelly when it's interpolated into the template.

nebrelbug commented 3 years ago

@ilanl blocks are mainly useful when you want to define two "sub-templates" that can be passed into one helper function. For example, the if helper uses blocks:

{{@if(it.someval === "someothervalue")}}
Display this!
{{#else}}
They don't equal
{{/if}}

"Display this!" is inside the default block, passed into the content parameter of a helper function. "They don't equal" is inside a block called else.

The if helper looks through each of its blocks. If the condition is true, it outputs the first block. If the condition is false and there are blocks called elif (else if), it loops through each of those blocks, evaluates whether their condition is true, and if so displays them. If the condition is false and there's a block called else, it outputs that block.

tafandi commented 1 year ago

Is there a way to extend the "each" helper so it can call a callback function on each iteration? The idea is to update a progress bar along the template execution (useful when processing big JSON data) so user will know how long to wait until completion. Thanks

nebrelbug commented 1 year ago

@tafandi you can look at https://github.com/squirrellyjs/squirrelly/blob/d460cc1bf705c9e73991aa1317680993239dcde4/src/containers.ts#L46 for the current each helper and override it.

theogravity commented 11 months ago

This page is completely unclear to me.

cfjedimaster commented 1 week ago

As @theogravity said, I'm a bit confused to. Is there an example on this page that shows the code that defines a helper?