0

私は最初のbackbonejsアプリから始めています。テンプレートに単純な値を入力するための2つのボタンがあります。これが私のページの完全なコードです：

<script src="http://code.jquery.com/jquery-latest.js"></script>   


<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>  


</head>

 <body>
 <button class="btn" id="dashboardBtn">Dashboard</button><button id="ledgersBtn" class="btn btn-warning">Ledgers</button>

 <script type="text/template" id="heading">  
 <h1><%= heading %></h1>
 </script>

  <div id="container">Loading...</div>



  <!-- JAVASCRIPT -->
  <script type="text/javascript">
  var app ={};

  app.Page=Backbone.View.extend({

el:"#container",

template: _.template($("#heading").html()),

events:{
    'click #dashboardBtn':'loadDashboard',
    'click #ledgerBtn':'loadLedger'
},

loadDashboard: function(){

    this.$el.html(template({heading:"Dashboard"})); 
    },

loadLedger: function(){
    this.$el.html(template({heading:"Ledgers"}));
}

});


 //-----------INITIALIZERS----------------
 app.page=new app.Page();


  </script>

ボタンをクリックしても何も起こりません。コンソールにも何も表示されません。私はここで愚かなことをしていることを知っていますが、何をしているのかわかりません。ヘルプ..

4

1 に答える 1

0

events問題はその一部だと思います。

events:{
    'click dashboardBtn':'loadDashboard',
    'click ledgerBtn':'loadLedger'
}

dashboardBtnおよびledgersBtn（button要素に「s」を付けて入力し、eventsオブジェクトに「s」を付けずに入力したことに注意してください）はidであるため、次のようになります。

events:{
    'click #dashboardBtn':'loadDashboard',
    'click #ledgerBtn':'loadLedger'
}

編集：

#containerビューのelをに設定したので、eventsオブジェクトはその中のすべてを参照することに気づきました#container。だから私はボタンをラップします：

<div id="container2">
   <button class="btn" id="dashboardBtn">Dashboard</button><button id="ledgersBtn"class="btn btn-warning">Ledgers</button>
</div>

そして、javascriptコードは次のようになります。

app.Page=Backbone.View.extend({

el:"#container2",

template: _.template($("#heading").html()),

events:{
    'click #dashboardBtn':'loadDashboard',
    'click #ledgersBtn':'loadLedger'
},

loadDashboard: function(){

    this.$el.html(this.template({heading:"Dashboard"})); 
    },

loadLedger: function(){
    this.$el.html(this.template({heading:"Ledgers"}));
}

});

templateその上、あなたが直接ではなく、loadDashboardとに電話をかけていたことに注意してくださいloadLedgerthis.template

于 2013-01-18T16:51:40.340 に答える