백본 : 뷰가 요소에 연결되지 않았습니다.

Question

모든 하위 뷰를 렌더링하는 일종의 ViewCollection이 있습니다.

define(
    ['jquery', 'underscore', 'backbone', 'text!templates/main/layout.html', 'text!templates/main/index.html', 'views/security/login', 'views/security/registration'], 
    function($, _, Backbone, LayoutTemplate, ContentTemplate, LoginView, RegistrationView) { 

    var IndexView = Backbone.View.extend({ 

     tagName: "div", 

     className: "container", 

     template: LayoutTemplate, 

     render: function() { 
      this.$el.html(LayoutTemplate); 

      this.$('div.content').html(ContentTemplate); 
      this.$('div.sidebar').append(new LoginView().render().el); 
      this.$('div.sidebar').append(new RegistrationView().render().el); 

      return this; 
     } 

    }); 

    return IndexView; 

}); 

아주 훌륭하게 작동합니다. 불행히도 예를 들어 LoginView가 더 이상 이벤트를 처리 할 수 ​​없다는 것을 알아 챘습니다. 대신 브라우저를 호출 아약스를 보내는

define(
    ['jquery', 'underscore', 'backbone', 'text!templates/security/login.html'], 
    function($, _, Backbone, LoginTemplate){ 

    var LoginView = Backbone.View.extend({ 

     tagName: "form", 

     className: "login well", 

     template: LoginTemplate, 

     events: { 
      "submit form.login": "submit" 
     }, 

     render: function(){ 
      this.$el.html(this.template); 

      return this; 
     }, 

     submit: function(e){ 
      e.preventDefault(); 

      var credentials = { 
       'username': $(e.target[1]).val() 
       , 'password': $(e.target[2]).val() 
      }; 

      console.log(JSON.stringify(credentials)); 

      $.ajax({ 
       url: '/session' 
       , type: 'POST' 
       , contentType: 'application/json' 
       , data: JSON.stringify(credentials) 
       , success: function() { 
        window.Router.navigate('node', { trigger: true }); 
       } 
       , error: function(xhr, status, error) { 
        console.log([xhr, status, error]); 
        $(e.target[1]).closest('div.control-group').addClass('error'); 
        $(e.target[2]).closest('div.control-group').addClass('error'); 
       } 
      }); 
     } 
    }); 

    return LoginView; 

}); 

는 ... 폼 데이터 뷰가 더 이상 어떤 의견에 경청하지 않는다는 표시입니다 GET 요청으로 URL 인코딩을 제출하려고

뷰 이벤트를 요소에 리바 인딩 할 수있는 옵션이 있습니까? 양식 태그는 또한보기의 .login 클래스 속성에 정의되어

<fieldset> 
    <legend>login</legend> 
    <div class="control-group"> 
     <label class="control-label" for="_session_username">username:</label> 
     <div class="controls"> 
      <input type="text" id="_session_username" name="session[username]" placeholder="george78" /> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="_session_password">password:</label> 
     <div class="controls"> 
      <input type="password" id="_session_password" name="session[password]" placeholder="••••••" /> 
     </div> 
    </div> 
    <button type="submit" class="btn btn-primary">login</button> 
</fieldset> 

login.html.

Answer 1

해결책을 찾았습니다.

범위 지정 문제가 있습니다. 뷰 (tagName : "form")에서 폼을 직접 정의했기 때문에 최상위 오브젝트는 "form.login"입니다. 그러나 이것은 우리가 더 이상 선택자를 통해 해결할 수 없습니다. 우리는 자식 객체 만 선택할 수 있습니다. (백본 내부 참조).

전 :

events: { 
     'keyup form.login input': 'checkInput' 
     , 'submit form.login': 'submit' 
    }, 

후 다음 _submit의 event_가 실행되지 않는 이유

events: { 
     'keyup input': 'checkInput' 
     , 'submit': 'submit' 
    },