简单的按钮单击骨干

时间:2013-07-04 09:33:13

标签: backbone.js backbone-views

我正在尝试使用骨干的不同功能,我遇到了一个奇怪的。我试图通过骨干提交表格。我以前做过这个,我无法找到我正在做的事情的错误。

代码如下:

HTML部分

   <div clas="loginpage"></div>
   <form class="login-user-form">
     <input type="text" name="name" id="name" placeholder="Enter Name"><br><br>
     <button type="submit" class="btn">Create</button>
   </form>

jQuery Part

var UserLogin = Backbone.View.extend({
   el:'.loginpage',
   initialize:function(){
   console.log("Login View Initialized");
 },
 events:{
   'submit .btn' : 'loginuser'
 },
 loginuser:function(){
   console.log("Login Clicked.");
   return false;
 }
});
var userlogin = new UserLogin();

我在控制台中收到Login View Initialized消息。但是我无法使用loginuser函数。该页面通过其默认提交功能提交。

我做错了什么?

2 个答案:

答案 0 :(得分:3)

1)loginpage不包含表格。修正:

<div class="loginpage">
  <form class="login-user-form">
    <input type="text" name="name" id="name" placeholder="Enter Name"><br><br>
    <button type="submit" class="btn">Create</button>
  </form>
</div>

2)

events : {
 'submit' : 'loginuser'
},

loginuser : function(){
  console.log("Login Clicked.");
  return false; // Stops default html form submission
}

答案 1 :(得分:0)

搞定了:

events:{   
    'submit' : 'loginuser'
}

从以下主题获得此内容:How do I get backbone to bind the submit event to a form?

干杯...... :)