4

我正在尝试一个简单的示例（请参阅下面的完整代码），其中包含最新的生产版本的主干.js、下划线.js 和 jquery。但是我无法在屏幕上显示任何内容。我已经尝试将 this.$el 记录到控制台日志，它似乎是有效的，html var 也包含来自测试模板的正确解析的 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>
4

2 回答 2

5

没有 id="container" 的元素可将模板附加到。如果你更换

el: $("#container")

和

el: $('body')

应该出现一些东西

于 2013-07-09T07:38:24.883 回答
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>

于 2013-07-09T07:49:44.343 回答