Question

我正在学习流星，我无法让我的辅助函数返回一些静态文本。

<head>
    <title>LeaderBoard</title>
</head>

<body>
    <h1>Leaderboard</h1>

        <p>{{player}}</p>
</body>

JS中的

if(Meteor.isClient){
    Template.leaderboard.helpers({
        player: function(){
        return "text";
        }
            });

}

这只返回Leaderboard标题

更新：变成：排行榜

<body>
    <h1>Leaderboard</h1>

        <p>{{player}}</p>
</body>
<template name="leaderboard">
    {{player}}
</template>

和JS仍然是相同的，它仍然无法正常工作

Answer 1

所以，你犯的错误很少。让我们解构它。

什么是模板？

模板是一段渲染到DOM中的代码，可以使用帮助程序，事件等进行操作。要使用任何模板，必须存在一个。它们既可以从包中放入您的应用程序，也可以由您自己制作。在这种特殊情况下，您正在寻找后者。

要定义模板，请选择任何HTML文件或创建新文件并以HTML方式定义：

<template name="theTemplate">
  Hello, I am the template.
</template>

现在，您可以使用以下语法将此模板注入所需的DOM中的任何位置：

<body>
    <h1>My super app</h1>
    <div>{{> theTemplate}}</div>
</body>

它将呈现为

<body>
    <h1>My super app</h1>
    <div>
        Hello, I am the template.
    </div>
</body>

事实上，自从Meteor保留所有缩进和内容以来，有点丑陋。

如何将可更改的文本放入模板？

您已经正确地需要帮助了。帮助器是一个函数，它返回一个按原样注入的Object（可以是String，Number等），就像它是document.write d一样。

任何模板的助手都以这种方式定义：

Template.theTemplate.helpers({
    coolestString: function () {
        return 'I am the coolest string put by a helper.';
    }
});

请注意Template对象包含theTemplate属性。它恰好发生在Meteor获取模板定义之后，然后使用helpers方法将其存储到对象中（以及一些其他有用的方法）。

如果删除theTemplate模板定义（也称为HTML），Template对象将不会拥有其theTemplate属性，并且整个事件将抛出TypeError，因为您尝试访问undefined。

的属性

如何将助手返回的值放入模板？

只需使用{{ ... }}语法即可。说，您有一个帮助coolestString，您需要从中获取值，无论它是什么，并放入h1标记：

<template name="theTemplate">
    <h1>{{ coolestString }}</h1>
</template>

请注意{{> ...}}和{{ ...}}之间的区别。前者注入模板，后者从当前上下文中注入一个值;模板的帮助者保持在其根上下文中（或者如果你还不理解上下文，就忘记它）。

那么，我应该怎么做才能在我的应用程序中使用模板？

得出结论，

定义模板。
（可选）定义其帮助程序。每个帮助器都应该返回一个字符串，一个数字，一个数组或一个对象。
访问助手＆＃39;使用{{ ... }}语法在模板中的值。
使用{{> ...}}语法将模板注入文档。

那就是它。

好的，请告诉我整个代码！

在myCoolestApp.html，

<body>
    {{> theTemplate}}
</body>

<template name="theTemplate">
    {{ coolestAppName }}
</template>

在myCoolestApp.js，

if (Meteor.isClient()) {
    Template.theTemplate.helpers({
        coolestAppName: function () {
            return 'My super cool app!';
        }
    });
}

完成！

但如果我想省略模板怎么办？

通常，根据定义，帮助程序属于某个模板，因此注入的层次结构是主体，然后是模板，然后是帮助程序。但是可以将一个帮助器直接注入文档主体并省略中间模板。您可以使用Template.registerHelper方法执行此操作：

Template.registerHelper('theHelper', function () {
    return 'I am helper'; // add some logic here and see how it works; hint: reactively.
});

您所做的只是将其放入您的文档中：

<body>
    {{ theHelper }}
</body>

将被渲染为

<body>
    I am helper
</body>

Template.registerHelper背后的原则是干，不要重复自己。有时您需要向多个模板提供完全相同的数据，因此首先您会认为必须复制帮助程序代码。但这种方法有助于避免不必要的重复。

您可以使用更复杂的对象，这种方式覆盖更复杂的逻辑，或者甚至可以直接将Mongo集合放入文档中。

Answer 2

选项1

如果您的应用没有多个页面/屏幕。像这样编辑模板html。

   <head>
     <title>LeaderBoard</title>
   </head>

 <body>
     <h1>Leaderboard</h1>

    {{> leaderboard}}
  </body>
  <template name="leaderboard">
    {{player}}
  </template>

PS： - {{player}} 是指模板助手“播放器”和 {{＆gt; leaderboard}} 是指模板（这是手柄语法）。

选项2：您的模板应如下所示。（假设您的应用有多个页面/屏幕 - 如果您使用某种路由器会更好）

主要布局页面 - 将其命名为master.html

  <head>
   <title>LeaderBoard</title>
  </head> 

 <body>
 </body>

名为排行榜的模板。称之为leaderboard.html

 <template name="leaderboard">
  {{player}}
 </template>

然后你的助手使用你在问题中提供的相同代码。

这应该有效。

Meteor和辅助功能的新功能无效

2 个答案: