发表新帖
发表新帖

Is there a way to pass variables into templates in Meteor?

前端 未结
关注
9 2109
深忆病人
深忆病人 2020-12-01 01:37

I\'ve been experimenting with Meteor and ran into something I couldn\'t figure out. For fun, I was trying to make a slot machine. I had the following HTML:

&
相关标签:
9条回答
  • 野趣味
    2020-12-01 02:18

    This is what I have done to achieve it. I am fairly new to Meteor so there may be a better way:

    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
  });
}

    Hope this was some help to you!

    0 讨论(0)
  • 甜味超标
    2020-12-01 02:21

    This information is out of date, passing arguments is described in detail for Blaze layout engine here: https://www.discovermeteor.com/blog/spacebars-secrets-exploring-meteor-new-templating-engine/

    0 讨论(0)
  • 你的背包
    2020-12-01 02:22

    I usually use these two Handlebars helpers:

    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));
});

    You can use it like this (suppose you have a template called menuItem):

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

    Or inside an iteration (suppose you have a template called userProfile):

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

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

    With Spacebars, you can achieve a somewhat similar behavior. In partial.js :

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

    In partial.html:

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

    Use it like this:

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

    Hope it will do the trick.

    0 讨论(0)
  • 囚心锁ツ
    2020-12-01 02:23

    All of the previous answers are overkill or outdated. Here's how you can pass static parameters into templates, directly from HTML+Spacebars code, as of 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>

    All you have to do is pass key="value" parameters in the {{> template}} inclusion call:

    {{> slot number="1"}}

    Learn more at Spacebars Secrets: Exploring Meteor Templates.

    If you want to pass the caller template's data to the child/nested/called template, here's how to do it: pass nothing. Instead, from the nested template, access the parent data context, ../:

    <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)
  • 庸人自扰
    2020-12-01 02:23

    Use this when you pass just one argument.

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

    No javascript required to do it. If you need more than a argument try Dan's way.

    0 讨论(0)
  • 名媛妹妹
    2020-12-01 02:27

    lots of good info in here. my specific situation is i also wanted to pass in some template data.

    i want to make the child Blaze component re-usable, so all the data must be passed in. as an example, let's say this component shows a grade (i.e. A, B, C, etc.). on a page, i want to use the component twice: your grade, and your classmates' average grade.

    here's the child component...

    Grade.html

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

    title can be hardcoded in the parent, but the grade comes from the db. here's how i code the parent...

    GradePage.html

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

    GradePage.js (in real life it's reactive, but simplified here)

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

    that's it. the child component doesn't have to reach out at all to get its values.

    0 讨论(0)
 看不清?
提交回复
热议问题