How to call the function inside the own function

Question

Ninjas.

I would like to know two things.

How to call the functions 'Initialize()' and 'FillValidateView()'. I wrote where I want to call these functions inside the following code.
I'm new to JavaScript programing. I would like to know if the following code is right to implement page transitions.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="header">
        <p></p>
    </div>

    <div id="main">
        <div id="validate_or_import">
            <input type="button" id="go_validate" value="Validate Data">
            <inp ut type="button" id="go_import" value="Import Data">
        </div>
    </div>

</body>
</html>

JavaScript

$(function () {

    var View = function () {
        this.title = ''
    };

    View.prototype = {
        Initialize: function () {
            this.title = '';
            this.tiles = [];
            $('#main').children().hide();
        },
        Render: function () {
            $('#header p').html(this.title);
            jQuery.each(this.tiles, function () {
                this.show();
            });
        },
        FillFirstView: function () {
            this.title = 'Select what you want';
            this.tiles.push($('#validate_or_import'));
            $('#go_validate').on('click', function () {
                // I want to call 'Initialize()' and 'FillValidateView()' here!!!!!
            });
            $('#go_import').on('click', function () {
                alert('Not implemented yet');
            });
        },
        FillValidateView: function () {
            this.title = 'Validate data';
            //I will write more about this view
        }
    };

    var view = new View();
    view.Initialize();
    view.FillFirstView();
    view.Render();

});

I forgot to write '
'!! I added it now.
– Nigiri Aug 09 '13 at 09:42 — Nigiri, Aug 09 '13 at 09:42
I'm about to call 'Render()' after 'FillValidateView()'. – Nigiri Aug 09 '13 at 09:45 — Nigiri, Aug 09 '13 at 09:45

score 3 · Accepted Answer · edited May 23 '17 at 10:25

3

(1) It's a bit tricky because the value of this won't be the original object in the callback. You could do:

var that = this;
$('#go_validate').on('click', function () {  
  that.Initialize();  
});

Or:

$('#go_validate').on('click', (function() {
  this.Initialize();
}).bind(this));

More infos in the this keyword: How does the "this" keyword work?

edited May 23 '17 at 10:25

Community

1
1

answered Aug 09 '13 at 09:52

Aegis

1,749
11
12

score 1 · Answer 2 · answered Aug 09 '13 at 09:59

Other answers showed how to capture this manually, but jQuery provides a dedicated facility for that: $.proxy. This is how to use it with your example (reduced for clarity):

$(function () {

    var View = function () {
    };

    View.prototype = {
        Initialize: function () {
            console.log('hi')
        },
        FillFirstView: function () {
            $('body').on('click', $.proxy(function () {
                this.Initialize()
            }, this));
        }
    };

    var view = new View();
    view.FillFirstView();

});

How to call the function inside the own function

2 Answers2