Dynamically load js content with iron router in meteor using array in return statement

Question

I would like to load the js content which belongs to the specified template by using iron router in meteor. The return statement returns plain text - It´s not useful for an array with some html-statements. How to return it by using the following array with the following html statement in Template.info.helpers?

.js

Router.route('/', function () {
    this.render('info');
});

Router.route('info');

Router.route('/hello', function () {
    this.render('hello');
});

Template.info.helpers({
    info() {
        var iterate ="";
        for (var i = 0; i < 10; i++){
            iterate += "<div class='row'>" + i + "</div>";
        }
        return iterate;
    } // Gives raw text -> Works NOT fine: <div class='row'>0</div><div class='row'>1</div>...
)};

Template.hello.helpers({
    hello() {
        var text = "Hello";
        return text;
    } // Works fine
)};    

.html

<template name="hello">
   <a href="{{pathFor route='info'}}">Home</a>
   </br>
   <a href="{{pathFor route='hello'}}">hello</a>
   <p>{{hello}}</p>
</template>

<template name="info">
   <a href="{{pathFor route='info'}}">Home</a>
   </br>
   <a href="{{pathFor route='hello'}}">hello</a>
   <p>{{info}}</p> <!-- Gives raw text -> Works NOT fine: <div class='row'>0</div><div class='row'>1</div> ... and so on -->
</template>

Please help. There allready was a usefully awnser, but I´ve got another problem now... :)

Answer 1

ok, I get the question now. You're trying to directly manipulate the DOM from your helpers but the reality is that your helpers will never run because you're not referring to the helpers in your html. Not only that your helpers don't have any reactive data in them.

Far simpler than manipulating the DOM in your helpers, just have the helpers return the strings you need and insert them directly in your template with {{hello}} and {{info}}

js:

Template.info.helpers({
    info() {
        return "Some info";
    }
)};

Template.hello.helpers({
    hello() {
        return "Hello";
    }
)};

html:

<template name="hello">
   <a href="{{pathFor route='info'}}">Home</a>
   </br>
   <a href="{{pathFor route='hello'}}">hello</a>
   <p id="hello">{{hello}}</p>
</template>

<template name="info">
   <a href="{{pathFor route='info'}}">Home</a>
   </br>
   <a href="{{pathFor route='hello'}}">hello</a>
   <p id="info">{{info}}</p>
</template>

{{hello}} tells blaze find the helper whose key is named "hello" and insert it here.

Note that {{> hello}} and {{hello}} will do completely different things. The first will insert the entire template whose name is "hello" and the second will render the result of the "hello" helper.

If your helper is returning html instead of plain text then you'll need to use triple braces in your template, i.e.

{{{hellohtml}}}