0

Backbonejs を使用したこの html コードを開くと、Chrome Java スクリプト コンソールが次のエラーをスローし uncaught TypeError: Cannot call method 'replace' of undefined ます。アンダースコア テンプレートを使用するとエラーがスローされるのはなぜですか?? ここにコードがありますunderscorethis.template = _.template($('#listing').html())List_view's initialize

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example Backbone Whisky APP</title>
  </head>
  <body>
    <script src="LIB/json2.js"></script> 
    <script src="http://underscorejs.org/underscore.js"></script>  
    <script src="http://code.jquery.com/jquery.js"></script>  
    <script src="http://backbonejs.org/backbone.js"></script>  
    <script type = "text/template" id="listing">
      <li>%= value %</li>
    </script>
    <script>

      Whisky = Backbone.Model.extend();
        firstWhisky = new Whisky({
        name : 'Blenders Pride'
      });
      Whiskies = Backbone.Collection.extend({
        Model:Whisky ,
        url:"#"
      });


      first_view = Backbone.View.extend({
        el : 'body',
        initialize : function() { 
          this.$el.empty();
          this.render();
        } , 


        render : function() { 
          this.$el.append("<h1>The Whisky APP</h1>");
         this.list_view = new List_view();
          this.$el.append(this.list_view.render().el);
          return this ; 
        }
      });
      List_view = Backbone.View.extend({ 
        tagName : 'ul' , 
        initialize : function() { 
          this.template = _.template($('#listing').html());
        } , 
        render : function() {
          this.$el.empty();
          this.$el.append("<li>Royal stag</li>");
          this.$el.append("<li>Signature </li> ");
          return this ; 
        }
      });
      index_view = new first_view();    
    </script>
  </body>
</html>
4

2 に答える 2

1

問題は、要素がまだ利用できないため、への呼び出し$("#listing").html()が返されることです。undefinedID で要素にアクセスするには、DOM が読み込まれるまで待つ必要があります。これは、単純なアラートをインラインで実行することで確認できます。DOM の準備が整うまで取得を遅らせる必要があります。

この場合は、本文にスクリプト タグが含まれているため、リクエストした時点でそれらのタグを使用できなくなります。スクリプト タグ (およびテンプレート) を移動すると、機能します。

http://jsbin.com/obahux/2/

発生する問題の 1 つは、構文が間違っていることです。コードの実行または値の発行には<%andを使用する必要があります。%>

<script type = "text/template" id="listing">
    <li><%= value %></li>
</script>
于 2013-03-28T15:21:31.430 に答える
0

これは、first_view 初期化関数で this.$el.empty() を使用して el をクリアしているためです。これにより、本文が空になり、そこには何もありません。そこにあるすべてのスクリプトとテンプレートは省略されます。

それをクリアするためのより良い解決策を見つけることができます。または、それを別の div タグでラップするだけです

于 2013-03-28T17:55:35.410 に答える