Using objects as event handlers

Question

So, I am a java developer, trying to not write too much java code in javascript. I have read various resources about javascript (like http://chimera.labs.oreilly.com/books/1234000000262/ch04.html ), but I still can't figure out a neat and nice way to do this right.

So, basic problem is:

click 'delete' button (there will be many delete buttons on the page)
open bootstrap modal dialog, which is a underscore template
bind action to buttons
if ok is clicked, make an ajax request

So, this is a solution that works partially so far. I am having problems calling functions from the ajax success callback. If I try to use 'this', it has the wrong context. I could probably store this in another variable (like 'that'), but that would definitely that nice.

Furthermore I am not quite sure this code looks that good, considering what I have read in above mentioned book

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;
};

Now I can use something like this

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

<script type="text/javascript">

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

I would be really happy if I could just call my function like this:

DeleteHandler.init();

is this possible? I will be using this function multiple times on the page, so I can't just use a literal instead of the function.

edit: I have found some sort of workaround to make the ajax callback happen: You can pass a context to the jquery ajax literal:

If I use something like this:

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

I can actually call this.close() in the success callback. Probably not a very nice solution. But probably someone has a better idea?

This question appears to be off-topic because it is about Code Refactoring, which should go on codereview.stackexchange.com . — Claudiu
– Claudiu, Commented Jul 15, 2013 at 21:34
This not actually about code refactoring. I am trying to find a good solution to a specific problem. I have offered what I have so far, in order to make understanding and pointing out specific points more easily. That question would work without my sample code, but would require much more effort to answer. But probably the codereview page is a good place for questions like these. — st-h
– st-h, Commented Jul 15, 2013 at 21:38
Since you're using jQuery, one way is to create a plugin (start from the links in here). There are also other ways to do what you already did, like moving the init code into a constructor function, and the other methods into TheConstructor.prototype.methodName, then instancing with new TheConstructor(args). Which method you choose to implement "pseudo-classes" is partly a matter of style. Maybe you could give more details as to why your current code doesn't "feel right". — bfavaretto
– bfavaretto, Commented Jul 15, 2013 at 22:11
Thank you. I am not that fond of using 'new' within javascript code. But probably I have just read the wrong javascript books and I am getting overly paranoid with my code :D I have updated my question to reflect another specific problem I am having with this code. — st-h
– st-h, Commented Jul 16, 2013 at 20:59

Lochemage · Accepted Answer · 2013-07-15 21:31:56Z

1

You've already wrapped it in an object via DeleteHandler function (functions are technically objects). Instead of making var obj, you can just declare an Init function inside your DeleteHandler function and call it...

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();
};

As for creating and using your object, it would look more like this instead:

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

<script type="text/javascript">

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

answered Jul 15, 2013 at 21:31

Lochemage

3,97413 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lochemage Over a year ago

If you are like me and are coming from an object oriented language like C++, I like to think of this format sort of like declaring a class. DeleteHandler is a class and inside it are vars and functions. Slight difference is that instead of declaring a constructor, you just do your construction directly inside the 'class'.

st-h Over a year ago

I have read in the book I mentioned that it is not that good practice to have constructors in mind, as javascript doesn't actually have constructors. But, yeah, probably I am indeed getting paranoid ;) Personally I don't like explicitly calling a constructor function within the declaration of that method. I have updated my question with another problem I am having trying to write that piece of code. Probably you are having a good idea on that as well.

Collectives™ on Stack Overflow

Using objects as event handlers

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related