MyView = Backbone.View.extend({ initialize: function(){ this.render(); } ,render: function(){ //Underscore.jsのテンプレートに変数を渡せます。 var variables = {what:"クルトン"}; // テンプレートをコンパイルします var templ = _.template($("#my_template").html(),variables ); // コンパイルされたHTMLをelに代入します。 this.$el.html( templ); } ,●●: { // hint : イベント "●● #●●" : "●●" // hint : "event selector : "callback" } ,onClick : function(e){ alert(e.currentTarget.id+ "がclickされた"); } }); var myview = new MyView({ el: $("#myview") });
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script> <div id="myview"></div> <script type="text/template" id="my_template"> <p><%= what %>という小さいパンをこよなく愛している。</p> <input type="button" value="クリック" id="btn" /> </script>