제출 이벤트를 양식에 바인딩하도록 백본을 얻으려면 어떻게해야합니까?

Question

내가보기를 만들려면 다음 코드를 사용하고 있습니다 :

LoginForm = Backbone.View.extend({ 

    tagName :"form" 
    ,id : "login-form" 
    ,className :"navbar-form" 
    ,initialize: function() { 
      this.model = new StackMob.User(); 
      this.render(); 
    } 
    ,render: function() { 
      $(this.el).html(this.template()); 
      return this; 
    } 
    ,events : { 
      "change" : "change" 
      ,"submit #login-form" : "login" 
    } 
    ,login : function(event) { 
      event.preventDefault(); 
      var self = this; 
      this.model.login(true, { 
        success: function(model) { 
          app.alertSuccess("User logged in"); 
          self.render(); 
        } 
        ,error: function(model, response) { 
          app.alertError("Could not login user: " + response.error_description); 
        } 
      }); 
      event.currentTarget.checkValidity(); 
      return false; 
    } 
// rest of code 

그리고 템플릿 :

<input name="username" class="span2" type="email" placeholder="Email" required > 
<input name="password" class="span2" type="password" placeholder="Password" required > 
<button id="login-button" type="submit" class="btn">Sign in</button> 

내가 버튼을 결합

는 로그인 함수가 호출됩니다합니다. 양식 제출 이벤트에서 바인딩하면 로그인 기능이 호출되지 않습니다. id & 양식 태그가 템플리트의 일부인 경우에도 양식을 가져올 수 있습니다. 이는 제가 여기서하고 싶은 것이 아닙니다.

이 경우 양식 제출시 어떻게 바인딩합니까?

Answer 1

"submit #login-form" : "login" 

Backbone은 하위 ID 중에서만이 ID를 검색합니다. 따라서 자신의 뷰 요소와 일치하지 않습니다. 왜 그냥 사용하지 않는 :

"submit": "login" 

당신이 변화를했던 것처럼.
확실하게 백본의 코드를 확인할 것입니다.

편집 : 당신이 선택을 넣으면
, 백본 대신

this.$el.on(event, method); 

의

this.$el.on(event, selector, method); 

를 호출합니다 그리고 jQuery를 방법에 대신 후손에 선택을 적용합니다 (요소 자체 제외).

Answer 2

백본을 잘못 사용하고 있습니다. 그래서 당신이하고 싶어하는 this.template 해당 만 메이크업 감각을하지

<form id="login-form" class="navbar-form"> 
    <input name="username" class="span2" type="email" placeholder="Email" required > 
    <input name="password" class="span2" type="password" placeholder="Password" required > 
    <button id="login-button" type="submit" class="btn">Sign in</button> 
</form> 

로 설정하고 수행한다

template: my_template_string, 
render: function() { 
    this.el.innerHTML = this.template(); 
}, 
events: { 
    "submit #login-form": function (event) {} 
} 

가는하는지? 왜 당신은 id와 classname을 input 요소들과 분리시키고 싶습니까? BTW, 당신은 여전히 ​​submit에 벌거 벗은 포괄 할 수 있지만, 내 방법은

• <form> 클래스 및 <form> 속성은
• , 바로 백본보기를 할 폼의 템플릿에 묶여, 그리고됩니다 귀하는 명시 적으로 올바른 제출 자료를 수집하고 있으므로
• 여러 제출 이벤트를 지원할 수 있습니까 (하나의 템플릿에 두 개의 양식이있는 경우).

Answer 3

아마도 양식 제출 이벤트에 바인딩하면 양식 만 제출하여 '제출'이벤트가 발생합니다. 코드 아래에 코드를 추가하고 다시 시도해보십시오.

$('#id').submit(function(ev) { 

});