Line break in data context does not show in html

1

This code displays data on a page, but when the data is like:
“line one some-line-break line two”, it fails to insert a line brake in the page, so it always shows
line one “the line break literal” line two with the exception of \n which does not show it.
I tried (replaced some-line-break with:)
\n, <br/>, <br>, &nbsp
, for no avail.

How can I fix it so that it shows the line break?
Thanks

<template name="content">
  <div class="container">
    <div class="row">
      <section class="col-xs-12">
        <ul class="list-group">
          {{#each this.items}}
            <li>{{> sub}}</li>
          {{/each}}
        </ul>
      </section>
    </div>
  </div>
</template>

<template name="sub">
  {{#if isEqual element "input"}}
    {{> input}}
  {{else}} {{#if isEqual element "select"}}
    {{> select}}
  {{else}}
    <p> {{value}} </p>   <<<<< this line
  {{/if}} {{/if}}
</template>`
2

Use {{{value}}} to render raw HTML (but be careful with this - see Rendering raw HTML in the Guide).

3

Alternatively (and probably safer): A helper function which you feed your data into and which spits out the data, with line-breaks converted to <br />

Template.sub.helpers({
    addLineBreak: function (data) {
        return data.replace(/some-line-break/g, "<br />");
    }
);

Careful, though, the first parameter of replace() is a regular expression. You may need to escape special characters.

Then you can do:

<template name="sub">
  {{#if isEqual element "input"}}
    {{> input}}
  {{else}} {{#if isEqual element "select"}}
    {{> select}}
  {{else}}
    <p> {{addLineBreak value}} </p>   <<<<< this line
  {{/if}} {{/if}}
</template>
4

and the link you provided says

You should be extremely careful about doing this, and always ensure you aren’t returning user-generated content (or escape it if you do!) from such a helper.

And the answer above gives a different solution indicating it is “safer”.

I don’t get the un safety part, Could someone please gives examples of the un safety being warned against? Thanks

5

If the source of the data is only you, this approach is mostly safe. Mostly.

If the source of the data is input gained from users, then this approach is very unsafe.

Just a very basic example: You let the user input some kind of text. The user enters:

<script>alert("Haxx0r3d!");</script>

instead of plain text. Next thing you know, anyone who visits your page gets an alert in his face. Of course, this is a harmless prank. Someone could deface your page with this, redirect all visitors somewhere else, steal their passwords and so on and so forth.

Basically, don’t do this unless there’s no other option. In this case, there is another option.

And believe me, I know. Way back, when I was starting out, I discovered the beautiful world of SQL insertions by someone doing a “DROP DATABASE” on my server.

tl;dr: Don’t do this

6

Thank you.

following your solution by providing a helper function. I need to replace the “\n” in the data by doing

return data.replace(/\\n/g, "<br />");
and the data supplied is "Line one.\nLine two."
But it is not breaking the line. Am I missing something? thx

7

Yes. That’s not the way to replace a linebreak consisting of the character \n.

What you are replacing are the two literal characters backslash and n. Because you escaped the backslash.

This is the correct way to do it:

/\n/g

8

That does not break the line but rather replaced the “\n” with the literal replacement string.

9

Yes, because I was wrong about the helper methods. Okay, but this here definitely should work without pasting the whole content unescaped into your application:

<template name="sub">
  {{#if isEqual element "input"}}
    {{> input}}
  {{else}} {{#if isEqual element "select"}}
    {{> select}}
  {{else}}
    {{> data }}
  {{/if}} {{/if}}
</template>

<template name="data">
    <p class="data_container">
        {{value}}
    </p>
</template>

Template.data.onRendered(function() {
       var temp = this.$('.data_container').html();
       temp.replace(/\n/g, "<br />");
       this.$('.data_container').html(temp);
});

If that does not work, use the insecure triple bracket and make damn sure you escape / replace / remove all unsafe characters beforehand.