JavaScript Templating

I just find my error: I forgot the filter trans near itemLabel ...

Hey tomchkkk!

No reason at all :). Actually, good eye - that was a mistake! With the self-executing blocks, you're trying to be "responsible" by passing what you need into the function. But, unfortunately, all of these variables - jQuery, Routing, _ - *are* truly global variables... which you're basically trying to convert to local variables while inside the function. But, you can see how easy it is to forget a detail, and suddenly start using the global variable.

In our Webpack tutorial (https://knpuniversity.com/s... or Webpack Encore tutorial (https://knpuniversity.com/s... - Encore is just a "shortcut" around Webpack) we talk about "module loading", which is an improvement on this method, and a situation where I would *not* have been able to make this mistake.

Cheers!

Hey Shaun T.

You are correct, Twig is used for backend rendering, but you don't have to use "Underscore" obligatory, you may want to use ReactJS or any other template engine for frontend (psst, utilize ReactJS)

Cheers!

Hey Thao L.
By using *$.parseHtml()* method you are ensuring that all the HTML injected it's been rendered correctly by the browser
You can find more information about it here:
https://api.jquery.com/jque...

Have a nice day!

Hey Daniel!

I believe this is basically a "Variable not found" error when it renders the template. In other words, the template needs a repLog variable, but there isn't one available. If you look at the last code block on the page, it shows the finished template (the code inside of the js-rep-log-row-template script tag. You shouldn't actually have a repLog variable in your template. Does your template have this variable? If it does have the variable, kill it! Make your's look like mine :). If not, post some more code - I want to see exactly what's going on.

Cheers!

Thanks Ryan! I missed delete the Twig related variables on the template.

Cheers

Hi Max!

Ah, it's just due to a subtle difference in how we're passing the variables to the Twig template versus the Underscore template - it's not due to any difference in how they work. Let me know show you :)

// in Twig we pass an array of variables to the template. One variable is called repLog
return $this->render('lift/index.html.twig', array(
    'form' => '...',
    // ... the variable will be called repLog
    'repLogs' => $repLogs,
));

But in Underscore, we're pass the repLog itself as the array of arguments, so its keys become the variables.

var html = tpl(repLog);
// this would be equivalent to this:
var html = tpl({
    // itemLabel and totalWeightLifted are the variables here
    itemLabel: repLog.itemLabel,
    totalWeightLifted: repLog.totalWeightLifted
});

Does that make sense? We could almost do the same thing in Twig:

// IF repLog were an associative array, this would work in Twig, and would mean that
// we would have variables like itemLabel and totalWeightLifted
return $this->render('lift/index.html.twig', $repLog);

Cheers!

Hey Ryan!

Cool! I never thought about using an associative array as twig parameter.

But if I wanted to render two different JS-Objects I would need to add the object.(.xy...) prefix, right?

Best

Hey Max,

If you have to pass 2 or more objects - then simply pass object of objects:

var html = tpl({
  repLog: repLog,
  object2: object2
});

Cheers!

Hey Julien,

If you're in Twig template, you can get the current user id with {{ app.user.id }} and put it on any data property. I think it makes sense to set it on body tag, but it's up to you, for example:

&ltbody data-user-id="{{ app.user.id }}">
&lt/body>

So if there's a logged in user or no - you'll know it in JS by parsing "user-id" data attribute with jQuery like "$('body').data('user-id')" or manually.

Does it makes sense for you?

Cheers!