有没有办法将变量传递到 Meteor 的模板中？

IT技术 javascript templates meteor
2021-03-05 18:21:17

我一直在试验 Meteor，但遇到了一些我无法弄清楚的事情。为了好玩，我试图制作一台老虎机。我有以下 HTML：

<div class="slot-wrapper">
  {{> slot}}
  {{> slot}}
  {{> slot}}
</div>

<template name="slot">
  <div class="slot">
    <div class="number"><span>{{ number }}</span></div>
    <div class="divider"></div>
  </div>
</template>

我想为每个插槽设置不同的编号。是否可以将变量传递给模板？像这样的东西：

<div class="slot-wrapper">
  {{> slot 1}}
  {{> slot 2}}
  {{> slot 3}}
</div>

<template name="slot">
  <div class="slot">
    <div class="number"><span>{{ number i}}</span></div>
    <div class="divider"></div>
  </div>
</template>

也许我正在以错误的方式思考这个问题，但有更好的方法。

6个回答

以前的所有答案都是矫枉过正或过时的。从 Meteor 0.8.x 开始，您可以通过以下方式将静态参数直接从 HTML+空格键代码传递到模板中：

<div class="slot-wrapper">
  {{> slot number="1"}}
  {{> slot number="2"}}
  ...
</div>

<template name="slot">
  <div class="number"><span>{{number}}</span></div>
</template>

您所要做的就是key="value"在{{> template}}包含调用中传递参数：

{{> slot number="1"}}

在Spacebars Secrets: Exploring Meteor Templates 中了解更多信息。

如果你想将调用者模板的数据传递给子/嵌套/被调用模板，这里是如何做到的：什么都不传递。相反，从嵌套模板访问父数据上下文../：

<div class="slot-wrapper">
  {{> slot number="1"}}
  {{> slot number="2"}}
  ...
</div>

<template name="slot">
  <div>Machine name: {{../name}}</div>
  <div class="number"><span>{{number}}</span></div>
</template>
@henk 您可以传递模板名称并使用Template.dynamic.
2021-05-13 18:21:17
还有一种方法可以传递模板而不是变量吗？例如 ...{{>slot number= {{>other template}} }}... ？
2021-05-16 18:21:17
谢谢你的回答。知道如何从代码中获取这个传递的参数吗？在 JavaScript 中
2021-05-20 18:21:17
@Kostanos - 使用 Template.currentData()。
2021-05-21 18:21:17

原来还有另一种方式。

我试图通过谷歌搜索各种搜索来找出如何做到这一点，并找到了这个问题，但没有什么适合我的目的。除非您想将嵌套模板放在父模板中的不同位置，否则 TomUnite 的答案有效。

因此，经过多次搜索，我在流星代码库中找到了“一个”答案。（不是说这是确定的答案，但确实有效）

<template name="slots">
  {{> slot one}}
  <div>..something else</div>
  {{> slot three}}
  {{> slot two}}
</template>

<template name="slot">
  <div class="slot">
    <div class="number"><span>{{number}}</span></div>
    <div class="divider"></div>
  </div>
</template>

如您所见，我们可以按任何顺序指定模板实例。第二个参数其实是一个应该定义的变量，所以：

Template.slots.one = {
  number: 1
}
Template.slots.two = {
  number: 2
}
Template.slots.three = {
  number: 3
}

这可以通过循环或使用 underscore.js 函数 _.extend 来制作更简洁的代码。此外，我们可以将多个数据字段传递给这些对象。

@DanDascalescu，现在 4 岁：P
2021-05-14 18:21:17
这个答案已经两年了，不再正确。请考虑删除它 - 您将保留积分！
2021-05-16 18:21:17

我想将此作为评论，因为它只是对 Joc 答案的澄清，但不能，所以这里加上我使用的示例。

只能将一个参数传递给模板：

{{> singleItemInfo arg1}}

此参数必须是一个对象，例如：

{
    number: 1,
    number2: 2,
    numberComposite: {
        subnum1: 10,
        subnum2: 20
    }
};

可以通过它们的键访问参数值，并且可以切换范围以获取具有

{{#with numberComposite}}

这是示例的完整代码：

<html 文件>

<body>
    {{ itemsView }}
</body>

<template name="itemsView">
    {{> singleItemInfo arg1}}
</template>

<template name="singleItemInfo">
    arg1 = {{ number }}
    arg2 = {{ number2 }} 
    {{#with numberComposite}}
        subArg1 = {{ subnum1 }}
        subArg2 = {{ subnum2 }}
    {{/with}}
</template>

<javascript 文件>

Template.itemsView.arg1 = {
    number: 1,
    number2: 2,
    numberComposite: {
        subnum1: 10,
        subnum2: 20
    }
};

输出：

arg1 = 1 arg2 = 2 subArg1 = 10 subArg2 = 20
@EmmanuelJoubaud 我将数据从助手传递到这样的模板中，该模板应该是反应式数据源，但数据传递到的模板在助手更新时不会更新。有任何想法吗？
2021-05-05 18:21:17
想通了，我从我的助手中的模板中获取数据（以便我可以进一步操作它）从 Template.instance().<varName> 然后将其返回到模板。我将其更改为从 Template.instance().data 获取数据，现在可以使用了。
2021-05-06 18:21:17
作为补充，您可以在其中使用反应式数据源，例如Template.itemsView.arg1 = function(){ Session.get('arg1object') }，子模板将使用数据源自动更新。
2021-05-16 18:21:17

更好的答案：

在新的 Blaze 布局下可用于使模板上下文敏感的两种解决方案是：

1) 直接将参数传递给模板 

{{> contextSensitiveTemplate  context_1='x' context_2='y' }}

2）在理解上下文的模板中使用帮助器。像这样调用助手：

{{ contextHelperName ../.. .. this }}

和 

Template.contextSensitiveTemplate.contextHelperName = function(parent_template, current_template, current_value_inside_each_loop) {
  return context_dependent_value_or_html     
}

这就是我为实现它所做的。我对流星相当陌生，所以可能有更好的方法：

Slot.html：

<head>
  <title>Slot</title>
</head>

<body>
  <div class="slot-wrapper">
    {{> slots}}
  </div>
</body>

<template name="slots">
  {{#each slots}}
    {{> slot}}
  {{/each}}
</template>

<template name="slot">
  <div class="slot">
    <div class="number"><span>{{number}}</span></div>
    <div class="divider"></div>
  </div>
</template>

Slot.js：

if (Meteor.is_client) {
  Template.slots.slots = function () {
    var returnArray = new Array();
    returnArray[0] = { 'number': 10 };
    returnArray[1] = { 'number': 87 };
    returnArray[2] = { 'number': 41 };
    return returnArray;
  };
}

if (Meteor.is_server) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

希望这对您有所帮助！

有趣的方法。完成工作，虽然我希望有一种更优雅的方式来做到这一点。
2021-04-30 18:21:17
@dan-dascalescu 在底部的回答是最新的方法。这也是最简洁的。
2021-05-04 18:21:17
其它你可能感兴趣的问题
上一篇使用引导轮播脚本无法读取未定义的属性“offsetWidth” 下一篇在 Javascript 中检测图像 404