Jor*_*own 62 javascript templates meteor
我一直在试验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>
也许我正在以错误的方式思考这个问题,并且有更好的方法.
Dan*_*scu 91
所有以前的答案都是过度或过时的.以下是从Meteor 0.8.x开始,如何直接从HTML + Spacebars代码将静态参数传递到模板中:
<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:探索流星模板了解更多信息.
如果要将调用者模板的数据传递给子/嵌套/调用模板,请按以下步骤操作:不传递任何内容.而是从嵌套模板访问父数据上下文../:
<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>
小智 14
事实证明还有另一种方式.
我试图通过谷歌搜索各种搜索找到如何做到这一点,并发现这个问题,但没有任何适合我的目的.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
}
这可以通过循环或者可以在slots对象上使用underscore.js函数_.extend来制作更简洁的代码.此外,我们可以将多个数据字段传递到这些对象中.
我想留下这个作为评论,因为它只是对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
}
};
OUTPUT:
arg1 = 1 arg2 = 2 subArg1 = 10 subArg2 = 20
更好的答案:
在新的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
}