В течение нескольких дней я начал использовать Ручки, и сейчас я использую Decorators. Я понял, как это работает, когда оно остается простым: Ex: украсить имя в одиночку: bill gaTes -> Mr Bill GATESДекоратор ручек в петле
Затем я попытался использовать декоратор в цикле «каждый», чтобы сделать то же самое, что и раньше, но со списком людей вместо одного. Проблема в том, что, когда я нахожусь в функции декоратора, мне нужно знать, какой элемент (из массива) я просматриваю.
Поэтому я хотел бы либо указать аргумент индекса цикла «каждый» (тогда, поскольку у меня есть доступ к данным, я мог бы получить текущий элемент) или текущий элемент.
Я попытался использовать @index (который обычно работает хорошо), но при отладке я получаю undefined. И я не могу найти способ получить текущий элемент в моем декораторе.
Вот код:
index.html
<!doctype html>
<html>
<head>
<title>Test Handlebars Decorators 4</title>
</head>
<body>
<div id = "main"> </div>
<script id = "rawTemplate" type = "text/x-handlebars-template">
{{#each this}}
Decorated: {{formatGenderHelper this}}
{{* activateFormatter @index}}
<br />
{{/each}}
</script>
<script type = "text/javascript" src = "js/lib/handlebars.min-latest.js"></script>
<script type = "text/javascript" src = "js/lib/jquery-2.2.4.min.js"></script>
<script type = "text/javascript" src = "js/data.js"></script>
<script type = "text/javascript" src = "js/index.js"></script>
</body>
</html>
data.js
var data = [{
"firstname": "Bill",
"lastname": "Gates",
"gender": "MALE"
}, {
"firstname": "Hillary",
"lastname": "Clinton",
"gender": "FEMALE"
}];
function formatMale(author) {
return "M. " + author.firstname + " " + author.lastname.toUpperCase();
}
function formatFemale(author) {
return "Mme " + author.firstname + " " + author.lastname.toUpperCase();
}
Handlebars.registerDecorator('activateFormatter', function(program, props, container, context) {
var genderHelper;
var gender = context.args[0] || context.data.root[0].gender;
switch(gender) {
case "MALE":
genderHelper = formatMale;
break;
case "FEMALE":
genderHelper = formatFemale;
break;
default:
console.log('Gender format not set. Please set before rendering template.');
genderHelper = function() {};
}
container.helpers = {
formatGenderHelper: genderHelper
};
});
index.js
// Get the template
var rawTemplate = $('#rawTemplate').html();
// Compile the template
var compiledTemplate = Handlebars.compile(rawTemplate);
// Apply the template on the data
var content = compiledTemplate(data);
// Finally, re-inject the rendered HTML into the DOM
$('#main').html(content);
Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.
Спасибо за помощь :)
Я не думаю, что это правильное использование декораторов. Я думаю, что декоратор определяет функцию форматирования для всего блока, а не для отдельных элементов. – 76484
Не могли бы вы немного расширить свой смысл? – Barudar
@ Барудар декоратор запускается одновременно с родительским блоком, а не дочерним блоком, где находится декоратор. Таким образом, это несколько нарушает типичные рассуждения о порядке выполнения блоков в шаблоне. В практическом плане для вашего случая, приведенного выше, это означает, что он запускается один раз, чтобы настроить функцию форматирования для всего родительского '# each' блока, а не для каждого дочернего блока, созданного' # each', итерации через элементы. –