在导入时退出HTML

Question

我使用Flask和Jinja2模板来创建自定义窗体。在这些形式中，当字段值发生更改时，我需要更改表单的一部分。

基本上，我的表单有一个select#content-type，我可以在其中选择一种内容类型，然后fieldset#content，其select的值更改时其HTML应该会有所不同。我有几个HTML模板，取决于select的值。

我的JS是这样的：

<script type="text/javascript"> 
    $(function() { 
     $("select#content-type").change(function() { 
      switch ($(this).val()) { 
       case "type1": 
        var html = "{% include "type1.html" | escape %}"; 
        $("fieldset#content").html(html); 
        break; 
       // ... 
      } 
     }); 
    }); 
</script> 

的事情是，在escape过滤器不会在include声明上班，也没有safe。我怎样才能做到这一点，还是有更好的方法来做我想做的事情？

Answer 1

有几个解决方案。

实现此目的的一种简单方法是使用辅助CSS类隐藏表单中与内容类型相关的所有部分，例如， .hide {display: none;}，当客户端选择某些东西时，只需从相应的div中删除此类：$("div#type1").removeClass("hide");。

另一种方法是使用Ajax请求加载表单的内容类型依赖部分。您可以定义一个类似/loadform的路由，其中​​服务器读取相应的模板文件并将其打印出来。然后，您可以将响应HTML注入原始表单。

第三种方法是在客户端选择内容类型时提交使用javascript的部分填充表单，然后呈现完整表单。