当 html 中有主干模板时，百里香叶无法解析

Question

Thyme Leaf 无法解析 html 文件，在我想使用一个模板作为主干js 视图并给出以下错误消息：

org.xml.sax.SAXParseException：元素的内容必须由 格式正确的字符数据或标记。

导致问题的html代码：

    <!-- models -->
<script type="text/template" id="template_slider">

  <div class="panel panel-primary">
    <div class="panel-heading">
      <h4 class="panel-title"><%= panel_title %></h4>
    </div>
    <div class="panel-body">
      <input id="<%= id %>" data-slider-id="<%= slider_id %>" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="0.01" data-slider-value="0" />
    </div>
  </div>

</script>

该问题的解决方案很简单，只需使用 /*<![CDATA[*/ 和匹配的结束标签 /*]]>*/ 但这样骨干网会失败，当我想创建新视图时会抛出以下错误消息

Uncaught ReferenceError: panel_title is not defined(匿名函数)@VM2747:6template@underscore.js:1461access@jquery.js:3626jQuery.fn.extend.html@jquery.js:5486Backbone.View.extend.render@map .Control.js:92Backbone.View.extend.initialize @map.Control.js:83Backbone.View @backbone.js:1224child @backbone.js:1884(匿名函数) @map.Control.js:96o.Mixin.Events .fireEvent@leaflet.js:6o.Path.o.Path.extend._fireMouseEvent@leaflet.js:7o.Path.o.Path.extend._onMouseClick@leaflet.js:7t.(匿名函数).s@leaflet。 js:8

有问题的js脚本：

 polyline.addEventListener('click', function() {
    var SliderView = Backbone.View.extend({
      initialize: function() {
        this.render();
      },
      render : function(){
        var variables = {
          panel_title : "Random",
          id : "my_id",
          slider_id : "my_idSlider"
        };
        var template = _.template( $("#template_slider").html(), variables );
        this.$el.html(template);
      }
    });

    var slider_view = new SliderView({ el: $("#slider_container")});
  });

我在没有spring和thymeleaf的情况下离线试了一下，js代码运行正常。

Answer 1

您必须配置 Thymaleaf 以在 HTML5Legacy 模式下解析。

由于我不知道您如何使用 thymaleaf，我无法为您提供工作代码。

您通常在配置文件中执行此操作，或者通过注入视图配置器并在那里执行...