logo标签列表

Underscore模板在Backbone中未渲染

javascriptjquerybackbone.jsunderscore.js
4
我正在尝试使用最新的backbone.js、underscore.js和jquery版本进行一个简单示例（请参见下面的完整代码）。但是，我无法在屏幕上显示任何内容。我已经尝试了将this.$el记录到控制台日志中，并且它似乎是有效的，另外html变量包含来自测试模板的正确解析HTML。但是，在浏览器窗口中没有显示任何内容。
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>testing Backbone.js</title>
  </head>
  <body>

      <script type="text/template" id="test-template">
      <div id="container">
          <%= test %>
      </div>
      </script>

      <script type="text/javascript" src="js/lib/jquery.js"></script>
      <script type="text/javascript" src="js/lib/underscore.js"></script>
      <script type="text/javascript" src="js/lib/backbone.js"></script>
      <script type="text/javascript">
        var testView = Backbone.View.extend({
            el: $("#container"),
            template: _.template($('#test-template').html()),
            render: function() {
                var html = this.template({test: 'hello World!'});
                this.$el.html(html);
                return this;
            }
        });

        $(document).ready(function() {
            var test = new testView();
            test.render();
        });
      </script>
  </body>
</html>
2个回答
5
没有id为"container"的元素来附加模板。如果您替换

，请确保要附加到存在的元素上。
el: $("#container")

使用

el: $('body')

应该会显示些内容

1

没有渲染代码。模板的内容不是DOM的可见部分；尝试这样做：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>testing Backbone.js</title>
  </head>
  <body>
      <div id="output"></div>
      <script type="text/template" id="test-template">
      <div id="container">
          <%= test %>
      </div>
      </script>

      <script type="text/javascript" src="js/lib/jquery.js"></script>
      <script type="text/javascript" src="js/lib/underscore.js"></script>
      <script type="text/javascript" src="js/lib/backbone.js"></script>
      <script type="text/javascript">
        var testView = Backbone.View.extend({
            el: $("#container"),
            template: _.template($('#test-template').html()),
            render: function() {
                var html = this.template({test: 'hello World!'});
                $("#output").html(html);
                return this;
            }
        });

    $(document).ready(function() {
        var test = new testView();
        test.render();
    });
  </script>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接