Fatal编程技术网
  • javascript/
  • Javascript 在Meteor中有没有一种将变量传递到模板的方法？

Javascript 在Meteor中有没有一种将变量传递到模板的方法？

javascript templates meteor

Javascript 在Meteor中有没有一种将变量传递到模板的方法？,javascript,templates,meteor,Javascript,Templates,Meteor,我一直在用流星做实验，遇到了一些我想不出来的东西。为了好玩，我试着做一个吃角子老虎机。我有以下HTML： <div class="slot-wrapper"> {{> slot}} {{> slot}} {{> slot}} </div> <template name="slot"> <div class="slot"> <div class="number"><span>{{ n

我一直在用流星做实验，遇到了一些我想不出来的东西。为了好玩，我试着做一个吃角子老虎机。我有以下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>


{{>slot}
{{>slot}
{{>slot}
{{number}}
我想每个插槽有一个不同的号码。是否可以将变量传递到模板中？大概是这样的：

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

{{#each commands}}
    {{> partialWithContext name="commandListItem" data=this isAdmin=false}}
{{/each}}
{{#each adminCommands}}
    {{> partialWithContext name="adminCommandListItem" data=this isAdmin=true}}
{{/each}}


{{>插槽1}
{{>插槽2}
{{>插槽3}
{{number i}}
也许我想得不对，还有更好的办法。

这就是我为实现这一目标所做的。我对Meteor还比较陌生，所以可能有更好的方法：

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>
希望这对你有所帮助

事实证明还有另一种方法

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

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

这可以通过循环或使用slots对象上的underline.js函数u.extend生成更简洁的代码。此外，我们可以将多个数据字段传递到这些对象中。

我想将此作为一个注释，因为这只是对Joc答案的澄清，但不能，所以这里是我的示例

只能向模板传递一个参数：

{{> singleItemInfo arg1}}
此参数必须是以下对象：

{
    number: 1,
    number2: 2,
    numberComposite: {
        subnum1: 10,
        subnum2: 20
    }
};
参数值可以通过它们的键进行访问，并且可以切换范围以获得具有

{{#with numberComposite}}

下面是示例的完整代码：

输出：

arg1 = 1 arg2 = 2 subArg1 = 10 subArg2 = 20
我通常使用这两个把手助手：

Handlebars.registerHelper('partial', function(templateName, options) {
    return new Handlebars.SafeString(Template[templateName](options.hash));
});

Handlebars.registerHelper('partialWithContext', function(templateName, context, options) {
    var extendedContext = _.extend(context, options.hash);
    return new Handlebars.SafeString(Template[templateName](context));
});
您可以这样使用它（假设您有一个名为
menuItem
）的模板）：

或者在迭代中（假设您有一个名为
userProfile
的模板）：

使用空格键，可以实现类似的行为。 在
partial.js中
：

Template.partialWithContext.chooseTemplate = function (name) {
    return Template[name];
};
在
partial.html
中：

<template name="partialWithContext">
    {{#with chooseTemplate name}}
        {{#with ../data}}
            {{> ..}}
        {{/with}}
    {{/with}}
</template>
希望它能起作用。

此信息已过时，Blaze layout engine的传递参数在此处有详细描述：

前面所有的答案都有些过火或过时。以下是从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>
请访问了解更多信息

如果要将调用方模板的数据传递给子模板/嵌套模板/被调用模板，请按照以下方法执行：不传递任何内容。相反，从嵌套模板访问父数据上下文，
。/
：

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


{{>slot number=“1”}
{{>slot number=“2”}
...
计算机名称：{{../name}
{{number}}
更好的答案：

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

1） 直接向模板传递参数

{{> contextSensitiveTemplate  context_1='x' context_2='y' }}
2） 在模板中使用理解上下文的帮助器。按如下方式调用帮助器：

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

当您只传递一个参数时，请使用此

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

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


{{>插槽1}
{{>插槽2}
{{this}}
不需要javascript就可以做到这一点。如果你需要的不仅仅是一场争论，试试丹的方法。

这里有很多好的信息。我的具体情况是，我还想传入一些模板数据

我想使child Blaze组件可重用，因此必须传入所有数据。例如，假设该组件显示等级（即a、B、C等）。在一个页面上，我想使用组件两次：你的成绩和你同学的平均成绩

这是子组件

Grade.html

<template name="Grade">
    <h3>{{title}}</h3>
    <div>{{grade}}</h3>
</template>
就这样。子组件根本不需要伸出手来获取其值。

有趣的方法。完成任务，尽管我希望有一种更优雅的方式来完成它。@dan dascalescu在底部的回答是最新的方式。它也是最简洁的。作为补充，您可以在其中使用反应式数据源，类似于
Template.itemsView.arg1=function（）{Session.get（'arg1object'）}
，子模板将使用数据源自动更新。@EmmanuelJoubaud我将数据从帮助程序传递到这样的模板中，该模板应为反应式数据源，但当帮助程序更新时，数据传递到的模板未更新。有什么想法吗？我想出来了，我从template.instance（）从助手中的模板中获取数据（这样我可以进一步操作它）。然后将其返回到模板。我将其更改为从Template.instance（）.data中获取数据，该数据现在可以工作。随着空格键的引入，该功能将不再工作。我还在想办法。嗨，赛里亚。是的，您不能使用原始解决方案，因为他们不再使用把手。你可以在答案中找到我更新的方法。Meteor已经改变并引入了空格键。请参见此处了解详细信息：和Dascalescu回答：您应该写一篇关于Blaze中的变化的摘要，然后直接回答问题。那你就不会被否决。（我没有否决你的答案。）这个答案已经有两年了，不再正确。请考虑删除它-你会保持要点！丹达斯卡莱斯库，现在4岁了：谢谢你的回答。你知道如何从代码中获取这个传递的参数吗？内部JavaScript@Kostanos-使用Template.currentData（）。是否有方法传递模板而不是变量？e、 g…{{>插槽号={{>其他模板}}}@您可以传递模板名称并使用
template.dynamic
。 
{{#each commands}}
    {{> partialWithContext name="commandListItem" data=this isAdmin=false}}
{{/each}}
{{#each adminCommands}}
    {{> partialWithContext name="adminCommandListItem" data=this isAdmin=true}}
{{/each}}

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

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

{{> slot number="1"}}

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

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

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

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

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

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

<template name="Grade">
    <h3>{{title}}</h3>
    <div>{{grade}}</h3>
</template>

<template name="GradePage">
    {{> Grade grade=gradeYours title="Your Grade" }}
    {{> Grade grade=gradeClass title="Class Grade" }}
</template>

Template.GradePage.helpers({
    gradeYours: function () {
        return 'A-';
    },
    gradeClass: function () {
        return 'B+';
    }
});