0

我从我的第一个backbonejs 应用程序开始。我只有两个按钮，我想用一个简单的值填充模板。这是我的页面的完整代码：

<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（请注意，您在按钮元素中使用 's' 键入它，而在事件对象中没有它）是 id，所以它应该如下所示：

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

编辑：

我刚刚意识到您将视图的 el 设置为#container，因此事件对象将引用它内部的所有内容#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直接调用loadDashboardand loadLedger，而不是this.template

于 2013-01-18T16:51:40.340 回答