javascript - 尝试获取脚本元素的内容时出现奇怪的行为

Question

我正在尝试主干和下划线模板。当我尝试取消引用脚本 block 的内容(使用 $("#people-templ").html() )时，根据调用的上下文，我会得到两种不同的行为。在主干 View 的渲染函数中，我没有得到任何返回。如果我在任何函数之外获取脚本 block 的内容，我就会得到有效的 HTML 内容。我在 Chrome、Safari 和 Firefox 上尝试过。我使用调试器单步调试并验证 JQuery 在调用 $("#people-templ") 时返回一个空数组。在回调函数内。我想知道是否有人对这种行为有解释。

在index.html中我有一个简单的模板:

<script type="text/template" id="people-templ">
    <h1>People</h1>
    <table>
        <thead>
            <tr><th>First Name</th><th>Last Name</th></tr>
        </thead>
        <tbody>
            <% people.each(function(person) { %>
                <tr>
                    <td><%= person.get("firstName") %></td>
                    <td><%= person.get("lastName") %></td>
                </tr>
            <% }) %>
        </tbody>
    </table>
</script>
<script src='/javascripts/lib/jquery-2.0.3.js'></script>
<script src='/javascripts/lib/underscore.js'></script>
<script src='/javascripts/lib/backbone.js'></script>

<script src="/javascripts/main/index.js"></script>

在index.js 中，我有以下 Backbone View 定义:

var peopleHtml = $("#people-templ").html();
var PeopleView = Backbone.View.extend({
    el: "#foo",

    initialize: function() {
        this.render();
    },

    render: function() {
        var people = new People();
        var me = this;

        this.$el.empty();
        people.fetch({
            success: function(people) {
                var template = _.template(peopleHtml, { people: people });
                me.$el.html(template);
            },

           error: function() {
              console.error("Failed to load the collection");
           }
        });
     }
 });

这有效。代码从 script 标签获取模板，Underscore 对其进行处理，并将生成的标记插入到 DOM 中。如果我搬家var peopleHtml = $("#people-templ").html();在回调内部，如下所示:

var PeopleView = Backbone.View.extend({
   el: "#foo",

   initialize: function() {
       this.render();
   },

   render: function() {
       var people = new People();
       var me = this;

       this.$el.empty();
       people.fetch({
           success: function(people) {
              var template = _.template($("#people-templ").html(), { people: people });
              me.$el.html(template);
           },

           error: function() {
               console.error("Failed to load the collection");
           }
       });
    }

});

然后似乎 $("people-tempo").html() 没有返回任何内容当处理模板时尝试进行文本替换时，代码在 underscore.js 内部失败。

有谁知道为什么会出现这种情况吗？

感谢 Pointy 解决了

<div id="foo"/>

和

<div id="foo"></div>

不是同一件事。如果使用前者，则从 div 开始的所有内容(包括我的所有脚本元素)都将被模板文本替换。使用后者，仅替换 div 的内容。

Answer 1

当使用元素进行下划线模板时，看起来您需要使用

<div id='foo'></div>

表单而不仅仅是:

<div id='foo'/>