2016-04-05 15 views
0

私はBackbonejsの初心者レベルです。私は単純なテンプレートを呼び出そうとしています。しかし、それはエラーの下に私を与えている:Backbone.jsにテンプレートをロードする

*Uncaught TypeError: Cannot read property 'replace' of undefined* 
私はそれのために作成した

参照くださいplnk: http://plnkr.co/edit/fTcL4m?p=info

ます。また、ここにコードを見つけることができます:

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <title>Loading a template</title> 
 
    </head> 
 

 
    <body> 
 
    <h1>Loading a template</h1> 
 

 
    <div id="search_container"></div> 
 
<script data-require="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<script data-require="[email protected]" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script data-require="[email protected]" data-semver="1.1.2" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script> 
 
    <script> 
 
     SearchView = Backbone.View.extend({ 
 
     initialize: function(){ 
 
      this.render(); 
 
     }, 
 
     render: function(){ 
 
      var template = _.template($("#search_template").html(), {}); 
 
      this.el.html(template); 
 
     } 
 
     }); 
 
     var search_view = new SearchView({ el: $("#search_container") }); 
 
    </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>

+0

の使用すべきであるということです'url'は' scripts/underscore-min.js'のようなものです...?問題の問題が再現されているかどうかチェックしましたか? –

+0

localhostでテストする必要がありますか? –

+1

他の人がそのplunkを実行できるようにするには、ライブラリにcdnリンクを使用する必要があります。 –

答えて

4

主な問題はあなたのscの順序ですriptタグ

は、スクリプトの実行時に存在しません。あなたは1の前にそれを追加するコードを含む、または$(function(){})でコードをラップすることにより、それがないことを確認する必要がありなど

もう一つの問題は、あなたがthis.$el.html(template);代わりbecuase動作しませんplunkr this.el.html(template);

+0

これはうまくいきました。 –

+1

'var template = _template($("#search_template ").html()、{});'また、アンダースコアのバージョンで何をすると思いますか。 1.7.0から、 'template'はHTML文字列ではなく関数になります。 –

+0

@muistooshort 'html()'はhtml文字列を返す関数を受け付けるので、テンプレート関数を呼び出してhtmlをロードします。私は違いは '{}'はオプションとして考えられ、テンプレート関数のデータではないと考えています...実際のデータを渡そうとするとうまくいけばうれしいです:P –

関連する問題