使用对象作为事件处理程序

Question

所以，我是一个java开发人员，试图不在JavaScript中编写太多的java代码。我已经阅读了关于JavaScript的各种资源（例如http://chimera.labs.oreilly.com/books/1234000000262/ch04.html），但我仍然无法弄清楚这样做的一个整洁和好的方法。

因此，根本的问题是：

• 点击“删除”按钮（会出现在页面上的许多删除按钮）
• 开放的引导模式对话框，这是一个下划线模板
• 绑定行动到按钮
• 如果正常点击，使Ajax请求

所以，这是一个部分，到目前为止有效的解决方案。 我有问题从ajax成功回调调用函数。如果我尝试使用“this”，它的上下文是错误的。我可以将其存储在另一个变量中（比如'that'），但那肯定会很好。

而且我不太清楚这个代码看起来那么好，考虑到我在上面提到的书已经阅读

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函数将函数包装到一个对象中（函数在技术上是对象）。而不是使VAR obj的，你可以声明初始化函数您DeleteHandler函数中，并调用它...

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>