Question

I’m struggling to get the below piece of code working. The problem is that when I wrap the two functions in the editItems property inside the parenthesis (), the code behaves strangely and assigns display: none inline css property to the edit button.

If I don’t wrap the two functions inside the parenthesis, I get a javascript syntax error function statement requires a name.

var shoppingList = {
    // Some code ...

    'init' : function() {


    // Capture toggle event on Edit Items button
    (shoppingList.$editButton).toggle(shoppingList.editItems);
    },


    'editItems' : function() {
        (function() {
            $(this).attr('value', 'Finish editing');
            (shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
                                     .removeAttr('href');
            $('.editme').editable("enable");
            $('.editme').editable('http://localhost:8000/edit-ingredient/', {
                indicator : 'Saving...',
                tooltip   : 'Click to edit...',
                submit    : 'OK',
                cancel    : 'Cancel'
            });
        }), (function() {
            $(this).attr('value', 'Edit item');
            (shoppingList.$ingrLinks).attr('href', '#');
            $('.editme').editable("disable");
            (shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
        })
    }
}

$(document).ready(shoppingList.init);

However, if I invoke the toggle event “directly” like this, it works:

var shoppingList = {
    // Some code ...

    'init' : function() {
        // Toggle event on Edit Items button
        (shoppingList.$editButton).toggle(
            function() {
            $(this).attr('value', 'Finish editing');
            (shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
                                     .removeAttr('href');
            $('.editme').editable("enable");
            $('.editme').editable('http://localhost:8000/edit-ingredient/', {
                indicator : 'Saving...',
                tooltip   : 'Click to edit...',
                submit    : 'OK',
                cancel    : 'Cancel'
            });
        }, function() {
            $(this).attr('value', 'Edit item');
            (shoppingList.$ingrLinks).attr('href', '#');
            $('.editme').editable("disable");
            (shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
        });
    }
};

$(document).ready(shoppingList.init);

Is there a way I could store the toggle event inside the editItems object literal and still have it working as expected?

Answer 1

editItems function looks really odd. I guess you just need to define 2 functions: startEdit and endEdit. And bind them on even and odd clicks using toggle.

 var shoppingList = {
    // Some code ...

    init : function() {
        // Bind on edit button click
        this.$editButton.toggle(this.startEdit, this.endEdit);
    },


    startEdit : function() {
            $(this).attr('value', 'Finish editing');
            shoppingList.$ingrLinks.unbind('click', shoppingList.ingredients) // disable highlighting items
                                     .removeAttr('href');
            $('.editme').editable("enable");
            $('.editme').editable('http://localhost:8000/edit-ingredient/', {
                indicator : 'Saving...',
                tooltip   : 'Click to edit...',
                submit    : 'OK',
                cancel    : 'Cancel'
            }),
    endEdit: function() {
            $(this).attr('value', 'Edit item');
            (shoppingList.$ingrLinks).attr('href', '#');
            $('.editme').editable("disable");
            (shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
        })
};

$($.proxy(shoppingList, 'init'));