Javascript 单个文件中的多个下划线模板具有公共值

我有一个template.html文件，如下所示：

<script type="text/template" id="form-template">
<input type="text" class="form-control input-sm" style="" id="company"
               value="<% if(typeof company!=='undefined') {%><%=company%><% } %>" placeholder="Company name">

</script>

<script type="text/template" id="person-template">
<input type="text" class="form-control input-sm" style="" id="company"
               value="<% if(typeof company!=='undefined') {%><%=company%><% } %>" placeholder="Company name">

</script>

当我渲染表单视图时，它可以正常工作，但是当我渲染person视图时，即使我没有传递任何数据，我也会将预先填充了值的字段作为“[object HTMLInputElement]”

显而易见的猜测是两个模板都在使用，但如果两个模板完全分开，为什么会出现问题？

您有两个问题：

您的两个模板都包含

id=“company”

，因此当您将两个模板放在同一页面上时，您应该会看到奇怪的事情发生

id

attributes必须是唯一的，否则你就不再有HTML了，你有了某种类似HTML的东西

在页面中放置

后，将有一个

窗口.company

属性，其值是

的DOM节点

第二个问题是您看到了什么，但无论如何您都应该修复1

下划线模板使用JavaScript允许对象充当作用域。如果

with

在提供的对象（在第二个模板中为

{}

）中找不到名称（

company

）。由于DOM中已经有

，

with

将找到

窗口。company

作为

company

。这就给您留下了

公司

中的DOM节点，

公司类型

不会是

未定义的

，因此您的模板会在页面上抛出一个字符串化的DOM节点

考虑这个简化的例子：

<script type="text/template" id="form-template">
    <input type="text" id="company"><br>
</script>
<script type="text/template" id="person-template">
    <%= typeof company %><br>
    <%= typeof company !== 'undefined' ? company : '' %>
</script>

您应该在页面上看到类似的内容：

<input ...>
object
[object HTMLInputElement]

对象
[对象HTMLInputElement]

以及控制台中的DOM节点

演示：

这是一个相当阴险的问题，我想不出什么干净的解决办法。可能的选择：

确保表单元素上的

id

s与模板中的任何属性都不匹配

确保为模板提供所有属性，即使是空属性。这将使您在

窗口中查找内容之前，先用

短路

使用

变量

选项：

默认情况下，template通过

with

语句将数据中的值放入本地范围。但是，可以使用变量设置指定单个变量名

有关使用

变量

选项的示例，请参见

模板

文档

切换到一个更好的模板系统，该系统不使用

欺骗。我倾向于使用把手

你有两个问题：

您的两个模板都包含

id=“company”

，因此当您将两个模板放在同一页面上时，您应该会看到奇怪的事情发生

id

attributes必须是唯一的，否则你就不再有HTML了，你有了某种类似HTML的东西

在页面中放置

后，将有一个

窗口.company

属性，其值是

的DOM节点

第二个问题是您看到了什么，但无论如何您都应该修复1

下划线模板使用JavaScript允许对象充当作用域。如果

with

在提供的对象（在第二个模板中为

{}

）中找不到名称（

company

）。由于DOM中已经有

，

with

将找到

窗口。company

作为

company

。这就给您留下了

公司

中的DOM节点，

公司类型

不会是

未定义的

，因此您的模板会在页面上抛出一个字符串化的DOM节点

考虑这个简化的例子：

<script type="text/template" id="form-template">
    <input type="text" id="company"><br>
</script>
<script type="text/template" id="person-template">
    <%= typeof company %><br>
    <%= typeof company !== 'undefined' ? company : '' %>
</script>

您应该在页面上看到类似的内容：

<input ...>
object
[object HTMLInputElement]

对象
[对象HTMLInputElement]

以及控制台中的DOM节点

演示：

这是一个相当阴险的问题，我想不出什么干净的解决办法。可能的选择：

确保表单元素上的

id

s与模板中的任何属性都不匹配

确保为模板提供所有属性，即使是空属性。这将使您在

窗口中查找内容之前，先用

短路

使用

变量

选项：

默认情况下，template通过

with

语句将数据中的值放入本地范围。但是，可以使用变量设置指定单个变量名

有关使用

变量

选项的示例，请参见

模板

文档

切换到一个更好的模板系统，该系统不使用

欺骗。我倾向于使用把手

---

您的person模板引用了一个参数，但没有将任何对象传递到模板函数中，这是没有意义的。您还没有显示所有的代码，但我猜当您呈现person视图时，

公司

是一个范围内的变量。这让我感到惊讶！如果我将company变量包装到person模板中的data.company之类的对象中，这就可以了。这是一个与同一变量相关的问题name@StephenThomas：beNerd显示了足够的代码。问题是下划线模板将

与
一起使用，
通过
window.x
将
x
作为一个全局变量引入。您的person模板引用一个参数并没有确切的意义，但您没有向模板函数传递任何对象。您尚未显示所有代码，但我猜
公司