将生成的HTML传递给JavaScript

我试图将生成的HTML字符串从Python传递到Javascript。这是我的视图的简化版本（使用金字塔框架）

从中，我看到我也可以在Javascript中使用

{{variable}}

，因此在我的JS文件中，我有一个函数，该函数尝试更改id为“content desc”的元素的innerHTML。但是我得到的只是字符串{{genHTML}}，而不是包含生成的HTML的实际变量

function insertHTML() {
    genHTML = '{{gen_html}}';
    $('#content-desc').html(genHTML);
}

---

我做错了什么？

将数据和内容从服务器端Python传递到JavaScript的一种好方法是

• JSON嵌入到HTML中

• 将JSON对象作为

  application/JSON

  mime服务的单独AJAX调用

对于嵌入方法，我会做一些事情，将数据作为JSON导出到页面模板：

   import json

   gen_html = ...
   javascript_data = json.dumps(dict(gen_html=gen_html))
   return dict(javascript_data=javascript_data)

然后在页面模板中，将其传递给JavaScript全局变量：

   <script>
          window.javascriptData = {{javascript_data}}; // Check need to escape HTML in your case
   </script>   

此外，我不会仅仅通过将HTML传递给JavaScript来生成HTML。相反，我会将原始数据作为JSON传递给JavaScript，然后使用客户端模板从这些数据在客户端生成HTML。这增加了复杂性，但更加“干净”和灵活

客户端JavaScript的微模板引擎示例：

---

我正在使用Python Markdown从服务器端的Markdown生成HTML，因此我不确定如何在客户端实现这一点（在JS中还没有找到足够好的Markdown解析器）。在代码之后，

window.javascriptData

给出一个关联数组

{“desc_html”：“Test这是desc
”}

，但是

window.javascriptData.gen_html

是未定义的。这似乎是因为

窗口。javascriptData

实际上是一个字符串，而不是一个对象…请使用View Source查找HTML文件的内容。函数是在哪个文件上编写的？{{gen_html}}将仅在page.jinja2中模板化

   <script>
          window.javascriptData = {{javascript_data}}; // Check need to escape HTML in your case
   </script>   

   $(document).ready(function() {
         $('#content-desc').html(window.javascriptData.gen_html);
   });