Использование объектов в качестве обработчиков событий

Question

Итак, я разработчик java, пытаясь не писать слишком много java-кода в javascript. Я читал различные ресурсы о javascript (например, http://chimera.labs.oreilly.com/books/1234000000262/ch04.html), но я до сих пор не могу понять, как аккуратный и хороший способ сделать это правильно.

Таким образом, основная проблема заключается в:

• нажмите «Удалить» кнопка (там будет много удаления кнопок на странице)
• открытого диалога начальной загрузки модальных, который является шаблоном Underscore
• связывает действия кнопкам
• если нормально нажата, сделать Ajax запрос

таким образом, это решение, которое работает частично до сих пор. У меня возникают проблемы с вызовами функций из обратного вызова успеха ajax. Если я попытаюсь использовать «это», у него неправильный контекст. Я мог бы, вероятно, сохранить это в другой переменной (например, «это»), но это определенно было бы неплохо.

Кроме того, я не совсем уверен, что этот код выглядит, что хорошо, учитывая то, что я прочитал в упомянутой выше книге

function DeleteHandler() { 
    var obj = { 
     init: function() { 
      _.bindAll(this, 'render', 'close', 'submit'); 

      this.$main = $('#main'); 
      // get underscore template 
      this._template = _.template($('#delete-template').html()); 
      // bind function to delete button 
      this.$main.on('click', '.delete', this.render); 


     }, 
     render: function(e) { 
      e.preventDefault(); 
      //render the template and bind button actions 
      this.$content = $(this._template({title: 'moe'})); 
      this.$content.on('click', '.ok', this.submit); 
      this.$content.modal('show'); 
      this.$endpoint = $(e.target).attr('endpoint'); 
     }, 
     close: function() { 
      this.$content.modal('hide'); 
     }, 
     submit: function() { 
      $.ajax({ 
       url: this.$endpoint, 
       type: 'DELETE', 
       success: function(data,textStatus){ 
        // call close function here! but how?!? 

       }, 

      }); 
     } 
    } 
    return obj; 
}; 

Теперь я могу использовать что-то вроде этого

<span class="delete" endpoint='http://....'>delete</span> 

<script type="text/javascript"> 

    $(function($) { 
     DeleteHandler().init(); 
    }); 
</script> 

Я бы на самом деле если бы я мог просто позвонить по моей функции следующим образом:

DeleteHandler.init(); 

это возможно? Я буду использовать эту функцию несколько раз на странице, поэтому я не могу просто использовать литерал вместо функции.

редактировать: я нашел какой-то обходной путь, чтобы сделать Ajax обратного вызова произойдет: Вы можете передать контекст для JQuery Ajax буквальным:

Если я использую что-то вроде этого:

$.ajax({ 
    url: this.$endpoint, 
    type: 'DELETE', 
    context: this, 
    success: function(data,textStatus){this.$update.html(data); this.close();}, 
} 

Я могу называть this.close() в обратном вызове. Наверное, это не очень хорошее решение. Но, возможно, у кого-то есть лучшая идея?

Answer 1

Вы уже завернули его в объект через функцию DeleteHandler (функции являются технически объектами). Вместо того, чтобы уаг OBJ, можно просто объявить функцию Init внутри вашей функции УдалитьОбработчика и назвать его ...

function DeleteHandler() { 
    // Declare the Init function inside our DeleteHandler object 
    function Init() {do stuff...}; 

    // Declare your other functions and 'stuff' 
    function render() {...}; 

    // Now call the function. 
    Init(); 
}; 

Что касается создания и использования вашего объекта, это будет выглядеть как это вместо:

<span class="delete" endpoint='http://....'>delete</span> 

<script type="text/javascript"> 

    $(function($) { 
     DeleteHandler(); 
    }); 
</script>