attributes - 让 Handlebars.js 排除源值为 null 的渲染属性？

Question

我正在尝试根据存储在 javascript 对象中的数据创建动态 XML。问题是某些属性的源数据可能包含 null，这将导致 Handlebars 使用空字符串渲染属性，而我希望 Handlebars 忽略它，根本不渲染它。我想我可以用这样的助手制作一个模板：

<item {{if id}}id={{id}}{{/if}}></item>

但这似乎是很多工作，并且使整个事情变得难以理解。有没有更好的方法来获得相同的结果？或者在渲染和删除具有空字符串的属性之后遍历整个 XML 可能是一个更好的主意？

Answer 1

我建议创建一个非常简单的Handlebars 助手。它可以采用 akey和 avalue作为参数，但仅在valueis0或真值时返回格式化属性。例如：

Handlebars.registerHelper('attr', function (key, value) {
    if (!Handlebars.Utils.isEmpty(value)) {
        return new Handlebars.SafeString(key + '="' + Handlebars.escapeExpression(value) + '"');
    }
});

您的模板将以下列方式调用帮助程序：

<item {{attr 'id' id}}></item>

注意：我添加了 HTML 转义，value以防它包含引号字符。

此外，如果您能够使用 ES6，模板文字会更漂亮：

return new Handlebars.SafeString(`${key}="${Handlebars.escapeExpression(value)}"`);

我创建了一个小提琴供您参考。