javascript - 将生成的 HTML 传递给 JavaScript

Question

我正在尝试将生成的 HTML 字符串从 Python 传递到 Javascript。这是我的观点的简化版本(使用 Pyramid 框架)。

@view_config(route_name='view_page', renderer='templates/page.jinja2', permission='view')
def view_cosmeceutical(request):
    gen_html = markdown( ingredient.desc )
    return dict(gen_html=gen_html)

来自 this thread ，我看到我也可以在 Javascript 中使用 {{ variable }}，所以在我的 JS 文件中，我有一个函数试图更改 ID 为“content-desc”的元素的 innerHTML .但我得到的只是字符串 {{ genHTML }} 而不是包含生成的 HTML 的实际变量。

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

我做错了什么？

Answer 1

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

• JSON 嵌入到 HTML 中

• 将作为 application/json mime 服务 JSON 对象的 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>   

然后在 JavaScript 中(最好保存在单独的静态 .JS 文件中):

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

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

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

DOM tree based JavaScript template engines