使用返回语句中的数组在流星中使用铁路由器动态加载js内容

时间:2017-10-20 09:44:27

标签: javascript meteor iron-router

我想通过在meteor中使用铁路由器来加载属于指定模板的js内容。 return语句返回纯文本 - 对于带有一些html语句的数组没有用。如何在 Template.info.helpers 中使用以下html语句使用以下数组返回

  

的.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>

请帮忙。已经有了一个非常有用的东西,但我现在又遇到了另一个问题...... :)

1 个答案:

答案 0 :(得分:1)

好吧,我现在得到了这个问题。你试图直接操纵帮助程序中的DOM,但实际情况是你的帮助程序永远不会运行,因为你没有在你的html中引用帮助程序。不仅你的帮助者没有任何反应数据。

比操纵帮助程序中的DOM简单得多,只需要帮助程序return所需的字符串,然后使用{{hello}}{{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}}告诉blaze 找到其键名为“hello”的帮助器并将其插入

请注意,{{> hello}}{{hello}}会做完全不同的事情。第一个将插入名称为“hello”的整个模板,第二个将呈现“hello” helper 的结果。

如果您的帮助者返回的是html而不是纯文本,那么您需要在模板中使用三重括号,即

{{{hellohtml}}}