javascript - 具有公共(public)值的单个文件中的多个下划线模板

Question

我有一个像这样的 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>

现在在 backbone view.js 中我有两个这样的 View

var FormView = Backbone.View.extend({

 template: _.template($(formTemplate).filter("#form-template").html()),
 render:
 function(){this.$el.html(this.template(this.model.toJSON())}
});

var personView = Backbone.View.extend({

 template: _.template($(formTemplate).filter("#person-template").html()),
 render:
 function(){this.$el.html(this.template()}
});

当我呈现表单 View 时，它工作正常，但是当我呈现人物 View 时，即使我不传递任何数据作为数据，我也会将字段预填充为“[object HTMLInputElement]”。

明显的猜测是两个模板都使用 <%=company%> 但如果模板彼此完全分开，为什么会出现问题？

Answer 1

你有两个问题:

1. 您的两个模板都包含 id="company"所以当你把两个模板放在同一个页面上时，你应该预料到会发生奇怪的事情。 id属性必须是唯一的，否则您不再真正拥有 HTML，您拥有的是某种看起来像 HTML 的东西。
2. 在你输入<input id="company">之后在页面中，您有一个 window.company值为 <input id="company"> 的 DOM 节点的属性.

第二个问题是您所看到的，但无论如何您都应该修复 1。

下划线模板使用 JavaScript 的 with 允许对象像作用域一样工作。如果with在提供的对象(在第二个模板中为 company)中没有找到名称(在本例中为 {})，然后它沿着作用域链向上寻找名为 company 的变量.因为你有 <input id="company">已经在 DOM 中，with会找到window.company作为company .在 company 中留下一个 DOM 节点和 typeof company不会是'undefined'因此您的模板会在页面上抛出一个字符串化的 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>

然后是一些 JavaScript 来反射(reflect)您的 Backbone 代码在做什么:

var f = _.template($('#form-template').html());
var p = _.template($('#person-template').html());

$('body').append(f());
$('body').append(p());
console.log(window.company);

你应该在页面上看到类似这样的东西:

<input ...>
object
[object HTMLInputElement]

和控制台中的 DOM 节点。

演示:http://jsfiddle.net/ambiguous/sRnuw/

这是一个相当隐蔽的问题，我没有想到干净的解决方案。可能的选择:

1. 确保 id表单元素上的 s 与模板中的任何属性都不匹配。

2. 确保为模板提供所有属性，即使是空的。这会让你短路 with在它去寻找东西之前 window .

3. 使用 variable _.template 的选项:

   By default, template places the values from your data in the local scope via the with statement. However, you can specify a single variable name with the variable setting.

   参见 _.template使用 variable 的示例的文档选项。

4. 切换到不使用 with 的更好的模板系统诡计。我倾向于使用 Handlebars。