Handlebars 中模板的条件渲染
Conditional rendering of template in Handlebars
在 Handlebars 中,当没有提供上下文数据时默认不呈现任何内容:
例如如果上下文
中没有提供title
变量,title: {{ title }}
将呈现title:
我想构建一个帮助程序,在提供上下文时正确评估模板,但在没有提供上下文变量时显示实际的胡子模板。
Here is a Plunk that illustrates this idea
我可以使用以下代码设法有条件地显示渲染或模板:
{{#unless title}}
{{{{raw-helper}}}}
<h2>title: {{title}}</h2>
{{{{/raw-helper}}}}
{{else}}
<h2>title: {{title}}</h2>
{{/unless}}
但我认为更优雅、可重用的解决方案是创建一个特定的助手。我会这样使用它:
{{#raw-unless body}}
body: {{body}}
{{/raw-unless}}
如果 body
字符串不为空/空/未定义,它将呈现:
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}}
我不熟悉自定义助手创建,任何帮助表示感谢
由于您没有在上下文中发送 body
,因此它拒绝了
{{#raw-unless body}}
body: {{body}}
{{/raw-unless}}
所以在else
条件下return你想要显示的文字。在这种情况下
Handlebars.registerHelper('raw-unless', function(data, options) {
if (data) {
return options.fn(this);
} else {
return '{{body}}'
}
});
我认为您无法从块助手中获取预编译的模板源。因此,我为您提供了两种选择:将默认值直接传递给您的助手,或者将字符串键传递给您的助手,以便助手可以格式化默认值。
第一个选项更通用,因为它允许模板定义默认输出:
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'}}
我有 forked and updated your plunk.
供您参考
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}}
模型未定义时
在 Handlebars 中,当没有提供上下文数据时默认不呈现任何内容:
例如如果上下文
中没有提供title
变量,title: {{ title }}
将呈现title:
我想构建一个帮助程序,在提供上下文时正确评估模板,但在没有提供上下文变量时显示实际的胡子模板。
Here is a Plunk that illustrates this idea
我可以使用以下代码设法有条件地显示渲染或模板:
{{#unless title}}
{{{{raw-helper}}}}
<h2>title: {{title}}</h2>
{{{{/raw-helper}}}}
{{else}}
<h2>title: {{title}}</h2>
{{/unless}}
但我认为更优雅、可重用的解决方案是创建一个特定的助手。我会这样使用它:
{{#raw-unless body}}
body: {{body}}
{{/raw-unless}}
如果 body
字符串不为空/空/未定义,它将呈现:
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}}
我不熟悉自定义助手创建,任何帮助表示感谢
由于您没有在上下文中发送 body
,因此它拒绝了
{{#raw-unless body}}
body: {{body}}
{{/raw-unless}}
所以在else
条件下return你想要显示的文字。在这种情况下
Handlebars.registerHelper('raw-unless', function(data, options) {
if (data) {
return options.fn(this);
} else {
return '{{body}}'
}
});
我认为您无法从块助手中获取预编译的模板源。因此,我为您提供了两种选择:将默认值直接传递给您的助手,或者将字符串键传递给您的助手,以便助手可以格式化默认值。
第一个选项更通用,因为它允许模板定义默认输出:
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'}}
我有 forked and updated your plunk.
供您参考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}}
模型未定义时