Как можно визуализировать переменные Handlebars внутри пользовательского вспомогательного блока? - PullRequest
Новая
       50

Как можно визуализировать переменные Handlebars внутри пользовательского вспомогательного блока?

0 голосов
/ 27 марта 2020

Я пытаюсь получить две переменные Handlebars для рендеринга внутри созданного мной помощника Handlebars.

Я использую Express. js механизм просмотра для рулей. js и в моем app.js настроили помощника для сравнения равенства: 

const hbs = require('hbs');

app.set('view engine', 'hbs');

hbs.registerHelper('ifEqual', (a, b, options) => {
  if (a === b) {
    return options.fn(this);
  }
  return options.inverse(this);
});

Мой контроллер передает две переменные в представление: 

res.render('my-view', {
  x: 3,
  y: 3,
});

В my-view.hbs Я бы Мне нравится отображать переменные, если они равны, поэтому я попытался: 

{{#ifEqual x y}}
  foo
  {{x}}
  {{y}}
{{/ifEqual}}

Результат - только foo. Почему {{x}} и {{y}} не отображаются здесь? Нужно ли делать это с частичным?

Ответы [ 2 ]

1 голос
/ 27 марта 2020

Причина, по которой ваш шаблон не будет отображать значения x или y из вашего блока ifEqual, заключается в том, что в контексте этого блока отсутствуют свойства x или y. Причина, по которой эти свойства отсутствуют в контексте, очень проста: это потому, что при вызове registerHelper вы использовали выражение функции стрелки для определения вспомогательной функции.

Выражения функций стрелок , в дополнение к более компактному синтаксису, отличается от стандартных функциональных выражений. Важным отличием в этом случае является то, что они не имеют своего собственного this контекста.

Когда вы вызываете registerHelper, Handlebars свяжут вспомогательную функцию обратного вызова с контекстом данных шаблона, в данном случае это был бы объект: { x: 3, y: 3 }. Однако это будет работать, только если вы используете обычное выражение функции в качестве обратного вызова и не выражение функции стрелки - поскольку выражение функции стрелки не может быть динамически связано с другим this context.

Это означает, что вы должны использовать регулярное выражение функции в качестве аргумента для registerHelper: 

hbs.registerHelper('ifEqual', function (a, b, options) {
    // Function body remains the same.
});

Чтобы лучше понять, что не так, вы можете console.log(this) в вашем помощнике используйте оба типа выражений функций и сравните разницу.

Я создал скрипку , чтобы продемонстрировать разницу.

0 голосов
/ 27 марта 2020

Хорошо, поэтому я сделал это с другим подходом: 

hbs.registerHelper('renderVars', (a, b) => {
  let output;
  if (a === b) {
    output = `foo ${a} ${b}`;
  } else {
    output = 'foo';
  }
  return output;
});

Тогда, на мой взгляд: 

{{#renderVars x y}}
{{/renderVars}}
...