1

我在玩骨干和下划线模板。当我尝试取消引用脚本块的内容（使用$("#people-templ").html()）时，我会根据调用的上下文得到两种不同的行为。在主干视图的渲染函数内部，我没有返回任何内容。如果我在任何函数之外获得脚本块的内容，我将获得有效的 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 视图定义：

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 的内容。

4

1 回答 1

1

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

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

形式，而不仅仅是：

<div id='foo'/>
于 2013-11-09T16:09:44.990 回答