Я экспериментировал с Метеором и столкнулся с чем-то, что я не мог выяснить. Для забавы я пытался сделать автомат. У меня был следующий 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>
Возможно, я думаю об этом неправильный путь и существует лучший путь.
Все предыдущие ответы являются излишеством или устаревший. Вот то, как можно передать статические параметры в шаблоны, непосредственно из кода 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>
много хорошей информации в здесь. моя определенная ситуация, я также хотел передать в некоторых шаблонных данных.
я хочу сделать дочерний компонент Пламени допускающим повторное использование, таким образом, все данные должны быть переданы в. как пример, скажем, этот компонент показывает класс (т.е. 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+';
}
});
вот именно. дочерний компонент не должен протягиваться вообще для получения его значений.
Используйте 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 попытки аргумента путь.
Лучший Ответ:
два решения, которые доступны созданию шаблона, контекстно-зависимого при новом расположении Пламени:
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
}
Эта информация устарела, передающие аргументы описан подробно для механизма расположения Пламени здесь: https://www.discovermeteor.com/blog/spacebars-secrets-exploring-meteor-new-templating-engine /
Я обычно использую эти двух помощников Рулей:
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 это добьется цели.