如何將對象傳遞給 .handlebars 模板並在 javascript 代碼塊中使用它？

Question

服務器.js：

app.get('/home', function (req, res) {
      data['one'] = "first";
      data['two'] = "secound";
      res.render('home', { data });
});

home.handlebars：

<script type="text/javascript">
      var data = { {{{data}}} };
      console.log(data.one);
</script>

瀏覽器控制台錯誤： Uncaught SyntaxError: missing ] in computed property name錯誤： Uncaught SyntaxError: missing ] in computed property name

如何傳遞對象以在腳本代碼塊內的 .handlebars 模板中使用它？

Answer 1

我認為我們需要審查一些事情才能找到解決方案。

首先，我們必須了解 Handlebars 中三重胡子標簽的含義。 默認情況下，Handlebars 將HTML 轉義其輸出。 這是防止跨站腳本 (XSS)的最佳實踐。 這意味着對於輸入{ data: "<p>Hello, World!</p>" } ，Handlebars 模板{{ data }}將輸出：

<p>Hello, World!</p>

在某些情況下，人們不希望 Handlebars 對其輸出進行 HTML 轉義，為此 Handlebars 提供了三重胡子標記，它將輸出未轉義的 HTML。 對於上面相同的輸入和模板，輸出將是：

<p>Hello, World!</p>

其次，我們必須了解 Handlebars 在將 JavaScript 對象作為雙（或三）花括號之間的表達式進行計算時的作用。 Handlebars 本質上是用該表達式的字符串化評估替換該表達式 - 如果您在控制台中記錄data.toString()就會得到它。 對於一個對象，字符串化的值將類似於[object Object] 。 請參閱此答案以進行討論。

對於我們的問題，我們必須弄清楚如何讓 Handlebars 呈現我們的整個data對象，並以有效的 JavaScript 格式進行渲染。 由於 Handlebars 將呈現一個字符串，我們可以將一個字符串化的 JSON 對象傳遞給它，並使用三重胡子來確保我們的引號不會被轉義。

我們的路由處理程序變為：

res.render('home', { data: JSON.stringify(data) });

我們的模板變成了：

<script type="text/javascript">
    var data = {{{ data }}};
    console.log(data.one);
</script>