Concatenating strings with variables in F3 template

[conleec]

I have a web app that I am porting over from Slim v3 framework. The logic part has been extremely straight-forward. My problem has been converting the Twig view templates to the F3 templates. Generally speaking it's been relatively easy, but the one place I'm having tremendous issue is when trying to build strings for Materialize classes.

For instance, suppose my contact form validation passes back a message_err that states, "The name field must be at least 3 characters."

The Slim app, utilizing Twig's template engine, would check to see if data.name_err was empty, if not it would create a new messageName by concatenating 'data-err="' with data.name_err and this would then be used to display an error state in a Materialize form. Here's the code:

<div class="input-field">
   <label for="name">Name:</label>
   {% if data.name_err %}
   {%  set messageName = 'data-error="'~data.name_err~'"' %}
   {% endif %}

Enter code here...

Is there any way to perform a similar concatenation in F3's built-in template engine? I have tried many different ways, and it seems to always throw a syntax error. It seems like I should be able to do something like:

<set msg="data-error=&#34 {{ @data.name_err }} "></set>

Enter code here...

Or this:

<set msg="{{ data-error=&#34 @data.name_err &#34}}"></set>

Enter code here...

But they both throw errors. There also doesn't seem to be a way to escape characters in the string, which is why I was attempting to use the ASCII characters for the quotes and also the equals sign at one point.

Any ideas would be greatly appreciated.

[richgoldmd]

The contents of the quoted matter in the set command is essentially php code (with allowance for @vars):

<set name="{{ 'data-error="' . @data.name_err . '"' }}">

There may  be other ways to accomplish it too. What happens with data-error after it is set? Can it be set inline where it is used?

<div id="something" {{ @data.name_err ?  'data-error="' . @data.name_err . '"' : '' }} >

[Dominic Arkwright]

Try this:

{~@msg = @data.name_err ? "data-error='{@data.name_err}'" : ''~}

[conleec]

richgoldmd, so I tried this, thinking it should work, but it still throws an error. I've attached an image both from the PHPStorm IDE, and the browser upon execution. Baffling.

Chris

[richgoldmd]

I can’t see the images.

[conleec]

You can right-click these and see them bigger in another tab...

[richgoldmd]

Ok- I tested this scenario - It looks like the <set> tag chokes on double quotes in the value. Perhaps the parser is off on this one. I completely expected it to work, but any expression with a double quote seems to kill it.

The solution proposed by @Dominic Arkwright works perfectly.

The IDE warning may also just be that the IDE doesnt understand F3 templates.

[Dominic Arkwright]

To clarify, I use the brace/tilde syntax – {~ … ~} – pretty sparingly, just when things get a bit more complicated. Usually, <set/> is fine, and if you can hit the template with the final value you need already set, even better.

[conleec]

Dominic,

Thank you for this. It does work. I'm moving forward and seeing what else might trip me up when trying to convert some existing Twig templates to F3 native templates. Do you have experience trying to make Twig work with F3, btw? It might be easier to figure out how to integrate Twig into F3 and then I wouldn't have to change any of my templates.

[Dominic Arkwright]

I've never tried integrating Twig with F3. How many templates do you have?

[William Stam]

ive never used the included templating in my projects. always just used twig. just cause its in F3 doesnt mean you HAVE to use it 

i have a helper class that i just call up which pretty much just does an echo of rendered result. not even sure how the included templating gets called tho

$render = new \System\Renderers\twig();

$render->setData($data);

$render->setPath($this->views);

$render->setRoot($this->system->get("ROOT"));

$render->setView("/layout/container.twig");

$render->render();

or something