Question

我从我的第一个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>

当我点击按钮时，没有任何反应。控制台中也没有显示任何内容。我知道我在这里做了一些蠢事，但不知道是什么。帮助..

Answer 1

我认为问题是events部分：

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

dashboardBtn和ledgersBtn（请注意，您在按钮元素中使用's'键入了它，而在events对象中没有它'），因此它应如下所示：< / p>

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

编辑：

我刚刚意识到您将视图的el设置为#container，因此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拨打loadLedger，而不是this.template

backbonejs应用程序根本不起作用

1 个答案: