Typo3 flow - render partial into javascript

Question

In typo3 flow framework I generate a few javascript variables in the Index.html.

Now I want to put some html from a partial into a variable. This is the call:

channels[{i.index}].card = ' <f:render partial="Channel/Item" arguments="{channel:channel}"/> ';

The content of the partial is nothing special:

<div class="col-md-1">
  test
</div>

But this generates a javascript error because typo3-flow produces Linebreaks after each row. Chrome reports an "SyntaxError: Unexpected Token ILLEGAL"

channels[0].card = '  
<div class="col-md-1">
test
</div>


';

The unexpected token is the first linebreak after the first ' , I think. If I write the partial in ONE line, the javascript-variable is correct. But I dont want to write all the HTML in the partial in one line.

How can I tell javascript that there is a linebreak? Or tell flow, that it should render the partial in one line?

Answer 1

That's normal for multiline values in JS, just using some IDE that validates JS create test.js file and it will show you an error.

You have two simple solutions:

Remove all line breaks in your partial so your code would look like (no empty lines at the end!):

<div class="col-md-1">test</div>

or end each line with back-slash:

<div class="col-md-1"> \
  test \
</div> \
\
\

Advanced solution is writing custom ViewHelper which will trim the code and replace line breaks with back-slash or remove them at all (line breaks are not required for proper formatting) this option makes sense if you know how to create custom ViewHelpers and/or your partial is rather large one and you want/need to keep line-breaks for easier work with the file.