Question

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

在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视图定义：

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");
           }
        });
     }
 });

这很有效。代码从脚本标记中获取模板，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'/>

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

1 个答案: