Handlebars中模板的条件渲染

Question

在Handlebars中，默认情况下，在未提供上下文数据时不显示任何内容：

例如title: {{ title }}将呈现title:如果在上下文中没有提供title变量

我想构建一个帮助程序，在提供上下文时正确评估模板，但在没有提供上下文变量时显示实际的胡子模板。

这是一个说明这个想法的Plunk

我可以设法使用以下代码有条件地显示渲染或模板：

{{#unless title}}
  {{{{raw-helper}}}}
  <h2>title: {{title}}</h2>
  {{{{/raw-helper}}}}
{{else}}
  <h2>title: {{title}}</h2>
{{/unless}}

但我认为更优雅，可重复使用的解决方案是创建一个特定的帮助器。 我会像这样使用它：

{{#raw-unless body}}
    body: {{body}}
{{/raw-unless}}

如果body string不为空/ null / undefined，它将呈现：

body: 'this is the body provided in context'

如果没有提供身体，它将呈现：

body: {{body}}

到目前为止，我试图像这样注册帮助器：

Handlebars.registerHelper('raw-unless', function(data, options) {
if(data) {
return options.fn(this);
}
else {
  var out = '{{#raw-helper}}';// 
  out += options.fn();
  out += '{{/raw-helper}}';// 
return out;
}
});

但它呈现： {{#raw-helper}} body: {{/raw-helper}}

---

我不熟悉自定义助手创作，任何帮助表示赞赏

Answer 1

我不认为您将能够从块帮助程序中获取预编译的模板源。 因此，我为您看到两个选项：将默认值直接传递给您的帮助程序或将字符串键传递给您的帮助程序，以便帮助程序可以格式化默认值。

第一个选项更通用，因为它允许模板定义默认输出：

Handlebars.registerHelper('render1', function (value, defaultValue) {
    return value || defaultValue;
});

您可以通过以下方式在模板中使用它：

body: {{render1 body '{{body}}'}}

如果您不需要在模板中定义默认文本的便利性，那么第二个选项很有吸引力，因为它简洁：

Handlebars.registerHelper('render2', function (key) {
    return this[key] || '{{' + key + '}}';
});

它将在您的模板中用作：

body: {{render2 'body'}}

为了您的参考，我已经分叉并更新了您的插件 。

---

由OP编辑

为了处理帮助程序的错误使用，我最终调整它是这样的：

Handlebars.registerHelper('render1', function (value, defaultValue) {
  var v = (typeof value ==='string')?value:null;
  var d = (typeof defaultValue === 'string')?defaultValue:'ERROR: undefined model / no default value provided';
  return v || d;
});

它将处理助手的滥用，例如：

body: {{render1 body}}

在上下文中未提供body且未提供默认值时，或者：

body: {{render1}}

当模型未定义时

Answer 2

既然你没有在上下文中发送body ，那就是拒绝

{{#raw-unless body}}
    body: {{body}}
{{/raw-unless}}

因此在else条件下返回要显示的文本。 在这种情况下

Handlebars.registerHelper('raw-unless', function(data, options) {
  if (data) {
    return options.fn(this);
  } else {
    return '{{body}}'
  }
});