2011-12-17 16 views
1

私はthisというバックボーンの簡単なビューについての小さな記事を見ました。 。バックボーンビューでテンプレートをレンダリングしません

<!DOCTYPE html> 
    <head> 
    <meta charset="utf-8"> 

    <script type="text/javascript" src="js/vendor/jquery-1.7.1.js"></script> 
    <script src="js/vendor/underscore.js"></script> 
    <script src="js/vendor/backbone.js"></script> 

    </head> 
    <body> 
    <div id="search_container"></div> 

    <script type="text/javascript"> 
    ;(function(){ 
     SearchView = Backbone.View.extend({ 
     initialize: function(){ 
     _.bindAll(this, 'render'); 
     }, 
     render: function(){ 

     var template = _.template($("#search_template").html(), {}); 
     $(this.el).html(this.template); 
     this.el.html(template); 
     } 
    }); 

    var search_view = new SearchView({ el: $("#search_container") }); 
    })(jQuery); 
    </script> 

    <script type="text/template" id="search_template"> 
    <label>Search</label> 
    <input type="text" id="search_input" /> 
    <input type="button" id="search_button" value="Search" /> 
    </script> 



    </body> 
</html> 

:しかし、私の試みは、私自身.. doesntの仕事:(私はコピーして自分のファイルにコードを貼り付けたが、何もまったく起こらなかっ

にその方法でテンプレートを読み込むためにここに私のコードです付属のスクリプトのすべてが..私は失敗何ですか?私を助けるために望んでいるすべての人に

感謝:)

yaaan

答えて

1

はここで働い例の最新バージョンですあなたのコードの。私は少しそれをきれいにした。モデルは、それに渡されていなかったため

<!DOCTYPE html> 
    <head> 
    <meta charset="utf-8"> 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> 
    <script type='text/javascript' src='http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js'></script> 
    <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js'></script> 
    <script type="text/javascript"> 
     $(function(){ 
     SearchView = Backbone.View.extend({ 
      initialize: function(){ 
      _.bindAll(this, 'render'); 
      }, 
      render: function(){ 
      $(this.el).html($("#search_template").html()); 
      } 
     }); 

     var search_view = new SearchView({ el: $("#search_container") }); 
     search_view.render(); 
     }); 
    </script> 

    <script type="text/template" id="search_template"> 
     <label>Search</label> 
     <input type="text" id="search_input" /> 
     <input type="button" id="search_button" value="Search" /> 
    </script> 
    </head> 
    <body> 
    <div id="search_container"></div> 
    </body> 
</html> 

コール_.templateするには、()がエラーを投げていたので、私はそのメソッドが呼び出しました。

@nikoshrのように、SearchViewがインスタンス化されたら、render()メソッドを呼び出す必要があります。

私が変更したコードからは、いくつかのマイナーな調整がありました。あなたはそれを見直すことができます。

関連する問題