Question

我的js文件中有这段代码

var selectedTagElement = _.template('$("#selected_tag_item_template").html()', item = { tag: label, value: value });
$('#wrapper_id').append(selectedTagElement);

这在我的html文件中

    <script type="text/template" id="selected_tag_item_template">
      <div class="tag_item selected js-selected_tag_item" 
           data-tag-value="<%= item.value %>" 
           data-tag-label="<%= item.tag %>"><%= item.tag %>
      </div>
    </script>

除了IE9和IE10之外，所有浏览器都能正常运行。如果尝试

console.log(selectedTagElement)

我得到的只是

LOG: function(n){return o.call(this,n,m)}

如果我尝试在我的html文件中打印项目变量，就像这样

<%= item %>

我明白了

function item() { [native code] }

出了什么问题？感谢

Answer 1

你得到的输出：

console.log(selectedTagElement)

表示selectedTagElement是一个函数。您曾经只能在一步中编译和填写模板stopped working in Underscore 1.7。

您需要分两步开始构建selectedTagElement：

使用_.template将模板编译为函数。
使用所需数据运行该功能以获取HTML。

所以你想这样说：

var t = _.template($('#selected_tag_item_template').html());
var selectedTagElement = t({ item: { tag: label, value: value } });

这应该适用于所有地方并符合标准用法。

您的代码根本无法正常工作。我将假设'$("#js_template").html()'只是一个错字，因为它没有意义。让我们将您的代码分解为等价的东西：

item = { tag: label, value: value };
var selectedTagElement = _.template('$("#js_template").html()', item);
$('#wrapper_id').append(selectedTagElement);

第一行创建一个全局item变量，用于保存您要为模板提供的数据。

第二行将模板编译成函数并完全忽略第二个item参数，因为它与_.template的任何选项都不匹配。

第三行将函数交给[append] 2。通常你给append一串HTML或一个DOM节点，但你也可以给它一个函数;当你给append一个函数时，它运行该函数并将其返回值用作HTML字符串。在非IE浏览器中，模板函数将通过偶然的全局变量得到item：

item = { tag: label, value: value }

但IE正在某处使用item函数（在浏览器中使用本机代码实现），而不是使用item变量。

Underscore.js模板IE9 / IE10没有返回正确的代码

1 个答案: