下划线模板未在主干中呈现

Question

我正在尝试一个简单的示例（请参见下面的完整代码），其中包含最新的生产版本的ribs.js，underscore.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>

Answer 1

没有带有id =“ container”的元素可将模板附加到该元素。 如果您更换

el: $("#container")

与

el: $('body')

应该有东西出现

Answer 2

没有渲染代码。 模板的内容不是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>

下划线模板未在主干中呈现

问题描述

2 个解决方案

解决方案1
5 已采纳 2013-07-09 07:38:24

解决方案2
1 2013-07-09 07:49:44

下划线模板未在主干中呈现

问题描述

2 个解决方案

解决方案1 5 已采纳 2013-07-09 07:38:24

解决方案2 1 2013-07-09 07:49:44

解决方案1
5 已采纳 2013-07-09 07:38:24

解决方案2
1 2013-07-09 07:49:44