在 parse/backbone/js/html 中使用模板时 ID 重复答案

【问题标题】：Id duplicates when using templates in parse / backbone / js / html在 parse/backbone/js/html 中使用模板时 ID 重复
【发布时间】：2014-11-04 06:38:40
【问题描述】：

当我在渲染函数中设置视图时，我得到了重复的 ID

var template = _.template($("#user-login-template").html(), {});
this.$el.html(template);

运行渲染函数后，运行渲染函数之前的 html 如下所示。事先，<div class ="app"> 是空的（应该是）。它将模板中的代码复制粘贴到 div 中。

<div class="app">
<input type="text" id="signup-username" placeholder="Username"/>
<input type="password" id="signup-password" placeholder="Create a Password"/>                                                                                                                                                              
<button id="signUpBtn">Sign Up</button>
<button id="logInBtn">Login</button>
</div>
<!-- Templates -->
<!-- Login Template -->
<script type="text/template" id="user-login-template">
    <input type="text" id="signup-username" placeholder="Username"/>
    <input type="password" id="signup-password" placeholder="Create a Password"/>
    <button id="signUpBtn">Sign Up</button>
    <button id="logInBtn">Login</button>
</script>

作为参考，这是我的整个视图的样子

var LogInView = Parse.View.extend({
    el: '.app',
    events: {
        "click .signUpBtn": "signUp",
        "click .logInBtn": "logIn"
    },
    initialize: function (){
        this.render()
    },
    logIn: function () {
        //To Do
    },
    render: function () {
        var template = _.template($("#user-login-template").html(), {});
        this.$el.html(template);
    }
});

【问题讨论】：

id 容器内的 id 属性根本不是 id 属性，它只是一段未解析的字符数据。您问题中的 HTML sn-p 仅包含一个 #signUpBtn，<script> 中的 <button id="signUpBtn">Sign Up</button> 根本不是 HTML。这是你担心的根本问题吗？
是的，我担心在渲染 iew 后，我的 html 中出现了两次 id（“signUpBtn”、“loginBtn”）。当我检查元素时，Webstorm（我的 IDE）给了我一个“Duplicate id reference”错误

标签： html parsing templates backbone.js duplicates

【解决方案1】：

如果 Webstorm 抱怨 ids 在 <script> 中，那么这是错误的，您有三个选择：

获取对 HTML 有更好理解的新 IDE。
弄清楚如何重新配置 Webstorm 以了解 HTML 的真正含义。一定有办法让 Webstorm 有点理智，这种事情现在很常见。
忽略警告（糟糕）。

<script> 中的内容不是 HTML，也不是 DOM 的一部分。在你的模板渲染后询问浏览器$('input[type=text]').length是什么，你会得到1，因为

<input type="text" id="signup-username" placeholder="Username"/>

<script> 内部不是 HTML，它只是文本。您甚至可以查看HTML specification of <script>：

允许的内容
不可替换的字符数据

不可替换的字符数据不是 HTML，它只是文本。

【讨论】：