下划线模板在 IE 中不起作用答案

【问题标题】：Underscore templates not working in IE下划线模板在 IE 中不起作用
【发布时间】：2014-05-05 13:25:48
【问题描述】：

我不明白为什么我的模板不能在 IE（任何版本）中工作

模板

<div id="Hero-Right">
<script type="text/html" id="heroItems">                        
      {{ _.each( planet.heroItems, function( heroItem ){ }}
      <div class="item first">
           img src="{{= heroItem.image }}" />
           <div class="item-text">
                {{= heroItem.text }}
           </div>
      </div>
      {{ }); }}
 </script>
 </div>

我的数据是

var data = {
        heroItems: [
            {
                image: "Images/Top-TV.png",
                text: "Watch the Tv Show"
            },
            {
                image: "Images/Top-Broc.png",
                text: "The Brand"
            }
        ]
     }

为了渲染模板，我调用了函数

function renderTemplate(data) {
    var template = _.template(
             $("#heroItems").html()
         );
    $("#Hero-Right").html(
            template(data)
        );
};

为了使用小胡子分隔符，我更改了下划线分隔符

 _.templateSettings = {
    interpolate: /\{\{=(.+?)\}\}/g,
    evaluate: /\{\{(.+?)\}\}/g,
};

这在 chrome 中显示得很好。

【问题讨论】：

那么在 IE 中会发生什么？您是否在开发者控制台中看到错误？
变量planet 是哪里来的？你能发布一个完整的jsfiddle吗？
抱歉，我在 IE 中没有看到任何错误。
好的，是不是让你说它不起作用？你能想象为什么这些信息会对试图帮助解决问题的人有用吗？
您在模板中有错字，缺少带有图片标签的<。

标签： javascript jquery templates underscore.js

【解决方案1】：

我假设您运行的是较旧的 IE 版本。在这种情况下：

_.templateSettings = {
    interpolate: /\{\{=(.+?)\}\}/g,
    evaluate: /\{\{(.+?)\}\}/g,     <-- Trailing Comma
};

删除尾随逗号

【讨论】：

令人印象深刻。鹰眼 :) （这会导致 IE 出现错误，至少在那些容易出现问题的版本中，对吧？）
这肯定会给旧的 IE 浏览器带来一些问题，所以谢谢。我的问题是代码是在下划线加载之前执行的。不知道为什么 IE 没有在控制台中显示任何内容。无论如何，一旦我将代码放入 doc.ready 函数中，它就可以完美运行。