Использование bind (this) для обработчика событий

Question

У меня есть объект. Он имеет некоторые атрибуты, функцию инициализации для элемента DOM и обработчик событий для этого элемента DOM.

Я хочу, чтобы мой обработчик событий имел доступ к свойствам объекта. Я использую .bind (это), но он говорит: «Невозможно вызвать метод« bind »undefined». Что я делаю не так?

var SignUpForm2 = { 
    eForm: null, 
    eEmailInput: null, 
    ePasswordInput: null, 
    signUpURL: null, 
    email: null, 
    password: null, 

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

     this.email = this.eEmailInput.val(); 
     this.password = this.ePasswordInput.val(); 

     $.ajax({ 
      type: "POST", 
      url: this.signUpURL, 
      data: { 
       email: this.email, 
       password: this.password 
      }, 
      success: function(response){ 

      } 
     }); 
    }, 

    init: function(eForm) { 
     this.eForm = eForm; 
     this.eEmailInput = this.eForm.find('input[name="email"]'); 
     this.ePasswordInput = this.eForm.find('input[name="password"]'); 
     this.signUpURL = "/index.php/ajax/user-sign-up-via-email"; 

     this.eForm.submit(this.handleFormSubmit.bind(this)); 
    }, 
} 

Answer 1

я есть jsfiddle работать с несколькими небольшими изменениями в вашем коде:

http://jsfiddle.net/nickadeemus2002/8sX75/

HTML:

<form id="test"> 
    <p>test form</p> 
    <label>email</label> 
    <input type="text" value="" name="email"/> 
    <br /> 
    <label>password</label> 
    <input type="text" value="" name="password"/> 
    <input type="submit" /> 
</form> 

JavaScript:

var SignUpForm2 = { 
    eForm: null, 
    eEmailInput: null, 
    ePasswordInput: null, 
    signUpURL: null, 
    email: null, 
    password: null, 
    handleFormSubmit: function() { 
    var formEmail = this.eEmailInput.val(); 
     var formPassword = this.ePasswordInput.val(); 
     var formSignUpUrl = this.signUpURL; 

     console.log(formEmail); 
     console.log(formPassword); 
     console.log(formSignUpUrl);  
     console.log('ajax POST to server'); 

    /* 
     //notice new vars to pass along 
    $.ajax({ 
     type: "POST", 
     url: formSignUpURL, 
     data: { 
      email: formEmail, 
      password: formPassword 
     }, 
     success: function(response){ 

     } 
    }); 
    */   
    }, 
    init: function(eForm) {  
     var parentObj = SignUpForm2;   
     this.eForm = eForm; 
     this.eEmailInput = this.eForm.find('input[name="email"]'); 
     this.ePasswordInput = this.eForm.find('input[name="password"]'); 
     this.signUpURL = "/index.php/ajax/user-sign-up-via-email"; 
//this.eForm.submit(this.handleFormSubmit.bind(this));     

     this.eForm.submit(function(e){ 
      e.preventDefault();  
      parentObj.handleFormSubmit(); 
     }); 
    }, 
} 

$(document).ready(function(){ 
    //create instance 
    SignUpForm2.init($('#test')); 

}); 

так вот мой подход.

1.) Используйте свой объект SignUpForm2 для передачи действительного селектора jquery («тестовая») метода init().

2.) Внутри init хранятся текущие входные значения формы для свойств SignUpForm2. Обработчик события отправки принимает и передает управление «handleFormSubmit» через переменную parentObj. Обратите внимание: я поместил здесь метод e.preventDefault() вместо того, чтобы поместить его в «handleFormSubmit», поскольку это имело для меня больше смысла.

3.) Внутри «handleFormSubmit» я использовал «this» для ссылки на свойства хранимых объектов. Я назначил их местным варам, поэтому у нас нет «этой» головной боли в рамках метода ajax. Затем я использовал локальные вары, чтобы сделать ваш ajax POST.

BTW: Подход Павла должен работать. Я думаю, что способ создания объектов - это вопрос предпочтения, основанного на ситуации. Поскольку вы создали литеральную структуру объекта, я остался с этим подходом.