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>
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 に答える