Существует ли способ передать переменные в шаблоны в Метеоре?

Я экспериментировал с Метеором и столкнулся с чем-то, что я не мог выяснить. Для забавы я пытался сделать автомат. У меня был следующий 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>

Возможно, я думаю об этом неправильный путь и существует лучший путь.

62
задан 12 April 2012 в 20:47

6 ответов

Все предыдущие ответы являются излишеством или устаревший. Вот то, как можно передать статические параметры в шаблоны, непосредственно из кода HTML+Spacebars, с Метеора 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>

Все, что необходимо сделать, передать key="value" параметры в {{> 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>
90
ответ дан 31 October 2019 в 13:52

много хорошей информации в здесь. моя определенная ситуация, я также хотел передать в некоторых шаблонных данных.

я хочу сделать дочерний компонент Пламени допускающим повторное использование, таким образом, все данные должны быть переданы в. как пример, скажем, этот компонент показывает класс (т.е. A, B, C, и т.д.). на странице я хочу использовать компонент дважды: Ваш класс и средний класс Ваших одноклассников.

вот дочерний компонент...

Grade.html

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

заголовок может быть hardcoded в родителе, но класс прибывает из дб. вот то, как я кодирую родителя...

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
ответ дан 31 October 2019 в 13:52

Используйте 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 попытки аргумента путь.

2
ответ дан 31 October 2019 в 13:52

Лучший Ответ:

два решения, которые доступны созданию шаблона, контекстно-зависимого при новом расположении Пламени:

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     
}
5
ответ дан 31 October 2019 в 13:52

Эта информация устарела, передающие аргументы описан подробно для механизма расположения Пламени здесь: https://www.discovermeteor.com/blog/spacebars-secrets-exploring-meteor-new-templating-engine /

0
ответ дан 31 October 2019 в 13:52

Я обычно использую эти двух помощников Рулей:

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

Hope это добьется цели.

2
ответ дан 31 October 2019 в 13:52

Другие вопросы по тегам:

Похожие вопросы: