javascript 在Meteor中是否有方法将变量传递到模板中？

njthzxwz 于 2023-04-19 发布在 Java

关注(0)|答案(9)|浏览(112)

我一直在尝试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>

也许我想错了，有更好的办法。

JavaScript

来源：https://stackoverflow.com/questions/10128053/is-there-a-way-to-pass-variables-into-templates-in-meteor

9条答案

按热度按时间

tpxzln5u1#

前面的所有答案都是多余的或过时的。下面是如何直接从HTML+空格键代码将静态参数传递到模板中，从Meteor 0.8.x开始：

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

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

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

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

赞(0）回复(0）举报 2023-04-19

jc3wubiy2#

原来还有别的办法。
我试图通过谷歌搜索各种搜索来找出如何做到这一点，并找到了这个问题，但没有适合我的目的。TomUnite的答案有效，除非你想把嵌套模板放在父模板的不同地方。
所以在我搜索了很久之后，我在meteor的代码库中找到了一个答案。（不是说这是一个确定的答案，但它确实有效）

<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来制作成更简洁的代码。此外，我们可以将多个数据字段传递到这些对象中。

赞(0）回复(0）举报 2023-04-19

wfveoks03#

我想留下这个作为评论，因为它只是对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

赞(0）回复(0）举报 2023-04-19

ugmeyewa4#

更好的答案：
在新的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     
}

赞(0）回复(0）举报 2023-04-19

7fhtutme5#

这就是我所做的来实现它。我是相当新的流星，所以可能有一个更好的方法：
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
  });
}

希望这对你有帮助！

赞(0）回复(0）举报 2023-04-19

9njqaruj6#

我通常使用这两个Handlebars助手：

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的模板）：

{{partial 'menuItem' command='Open'}}

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

{{#each regularUsers}}
    {{partialWithContext 'userProfile' . isAdmin=false}}
{{/each}}

{{#each admins}}
    {{partialWithContext 'userProfile' . isAdmin=true}}
{{/each}}

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

Template.partialWithContext.chooseTemplate = function (name) {
    return Template[name];
};

在partial.html中：

<template name="partialWithContext">
    {{#with chooseTemplate name}}
        {{#with ../data}}
            {{> ..}}
        {{/with}}
    {{/with}}
</template>

这样使用它：

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

希望它能起作用。

赞(0）回复(0）举报 2023-04-19

mec1mxoz7#

当只传递一个参数时，使用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>

不需要javascript。如果你需要的不仅仅是一个参数，试试Dan的方法。

赞(0）回复(0）举报 2023-04-19

sshcrbum8#

此信息已过时，Blaze布局引擎的参数传递详细说明如下：https://www.discovermeteor.com/blog/spacebars-secrets-exploring-meteor-new-templating-engine/

赞(0）回复(0）举报 2023-04-19

kpbwa7wx9#

这里有很多好的信息。我的具体情况是我还想传入一些模板数据。
我想让子Blaze组件可重用，所以所有的数据都必须传入。举个例子，假设这个组件显示了一个等级（即A，B，C等）。在一个页面上，我想使用该组件两次：你的成绩和你同学的平均成绩。
这是子组件...
Grade.html

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

标题可以硬编码在父，但成绩来自数据库。这里是我如何编码的父…
GradePage.html

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

GradePage.js（在真实的生活中，它是响应式的，但在这里进行了简化）

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

子组件根本不需要去获取它的值，就是这样。

赞(0）回复(0）举报 2023-04-19

我来回答

javascript 在Meteor中是否有方法将变量传递到模板中？

9条答案

相关问题

热门标签

最新问答