Question

所以，我是一名java开发人员，试图不在javascript中编写太多的java代码。我已经阅读了有关javascript的各种资源（例如http://chimera.labs.oreilly.com/books/1234000000262/ch04.html），但我仍然无法找到一个干净利落的方法来做到这一点。

所以，基本问题是：

点击“删除”按钮（页面上会有很多删除按钮）
打开bootstrap模式对话框，这是一个下划线模板
将动作绑定到按钮
如果单击确定，则发出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>

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

1 个答案: