包含JavaScript撇號的Escape Mustache變量

Question

我有一個變量（ {{title}} ，其中包含撇號。 小胡子將其轉義為' 。

但是，以下模板導致JavaScript錯誤（“ Expected token ')' ）：

<a href="javascript:confirm('{{title}}?');">{{title}}</a>

渲染小胡子后，語法錯誤已清除（ 'Joe's Lame?' ）：

<a href="javascript:confirm('Joe's Lame?');">Joe's Lame</a>

我仍在學習Mustache，並且在構想此示例的同時，在這些情況下轉義變量的正確方法是什么。

小提琴供參考。

Answer 1

因此，如果不必一定是Mustache，則可以使用稱為Handlebars的Mustache超集。

首先注冊一個Handlebars助手：

Handlebars.registerHelper('escapeJs', function(str) {
    return str.replace(/[\'\"\\\/]/gm, function (c) {
        return '\\' + c;
    });
});

您這樣稱呼您的幫手{{escapeJs title}} ：

var view = {
    title: "Joe's Lame\"\\/€"
};

var template = Handlebars.compile(
    "<a href=\"javascript:confirm('{{escapeJs title}}');\">{{title}}</a>");
var output = template(view);

觀看它生活在這個小提琴中 。

胡子真的很酷，幾乎所有編程語言都可以使用。 車把很棒，並且被用於例如Backbone Thorax和assemble （功能強大的靜態網站生成器）中。

編輯：替代解決方案

使用ECMAScript 5（以及應與IE8一起使用的shim / shiv / polyfills）時，可以按以下方式為Mustache准備視圖對象。 我承認，這不是一個非常方便的解決方案，但是當很少生成JavaScript輸出時，IMO可能會接受。

function escapeJs (str) {
    return str.replace(/[\'\"\\\/]/gm, function (c) {
        return '\\' + c;
    });
}

var view = {
    title: "Joe's Lame"
};

Object.defineProperty(view, 'titleJsEnc', {
    enumerable: false,
    get: function () { return escapeJs(this.title); }
});

var output = Mustache.render(
    "<a href=\"javascript:confirm('{{titleJsEnc}}');\">{{title}}</a>", view);

定義一個新屬性（通過Object.defineProperty ）就可以了。 可以編寫一個通用的對象裝飾器，為每個返回轉義的字符串值的實際屬性定義一個吸氣劑。

這是小提琴

編輯：替代：等待新版本的胡子

合並此請求請求並發布新版本的Mustache后，應以“ Mustache本機方式”解決此問題。