简体   繁体   English

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

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

I would like to load the js content which belongs to the specified template by using iron router in meteor. 我想通过在流星中使用铁路由器来加载属于指定模板的js内容。 The return statement returns plain text - It´s not useful for an array with some html-statements. return语句返回纯文本-对于带有某些html语句的数组,它没有用。 How to return it by using the following array with the following html statement in Template.info.helpers ? 如何通过在Template.info.helpers中将以下数组与以下html语句一起使用来返回它?

.js .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 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... :) 那里已经是一个有用的遮阳篷,但是我现在又遇到了另一个问题... :)

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. 您试图直接从帮助程序中操作DOM,但现实情况是您的帮助程序永远不会运行,因为您没有在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}} 比在帮助程序中操作DOM简单得多,只需让帮助程序return所需的字符串,然后使用{{hello}}{{info}}将它们直接插入模板即可

js: JS:

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

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

html: 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 . {{hello}}告诉blaze 查找其键名为“ hello”的帮助程序,并将其插入此处

Note that {{> hello}} and {{hello}} will do completely different things. 请注意, {{> hello}}{{hello}}会做完全不同的事情。 The first will insert the entire template whose name is "hello" and the second will render the result of the "hello" helper . 第一个将插入名称为“ hello”的整个模板 ,第二个将呈现“ hello” helper的结果

If your helper is returning html instead of plain text then you'll need to use triple braces in your template, ie 如果您的助手返回的是html而不是纯文本,则您需要在模板中使用三括号,例如

{{{hellohtml}}}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM