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

Question

所以，我是一名java开发人员，试图不在javascript中编写太多java代码。我已经阅读了有关 javascript 的各种资源(例如 http://chimera.labs.oreilly.com/books/1234000000262/ch04.html )，但我仍然无法找到一种简洁而好的方法来正确执行此操作。

所以，基本问题是:

• 点击“删除”按钮(页面上会有很多删除按钮)
• 打开引导模式对话框，这是一个下划线模板
• 将操作绑定(bind)到按钮
• 如果点击“确定”，则发出 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函数将其包装在一个对象中(从技术上讲，函数是对象)。您可以在DeleteHandler函数中声明一个Init函数并调用它，而不是创建var obj...

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>