Question

I’m starting with phonegap and also trying to apply JavaScript OOP with it. But the problem are the method calls and stuff. imagine this:
I have a main controller in JavaScript, this file try to control most of the work-flow between network calls, database a change views.
This is my main.js.

var onlineStatus = false;
var mainModel;
var connectTo = "http://192.168.1.65/mobile/service/";

document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("online", online, false);
document.addEventListener("offLine", offline, false);

function whenOnline() {
    setOnline(true);
}

function whenOffline() {
    setOnline(false);
}

function onDeviceReady() {
    mainModel = new MainModel();
    mainModel.openDatabase();
    mainModel.startApplication();
}

and the mainModel is this:

function MainModel() {
    this.isOnline = false;
    this.database = null;
    this.login = null;

    this.getDatabase = function() {
        return this.database;
    };

    this.openDatabase = function() {
        this.login = new LoginModel();
        this.database = window.openDatabase("wayacross", "0.2", "Test DB", 1000000);
    };

    this.startApplication = function() {
        this.database.transaction(this.login.checkLogin, goLoggin);
    };
}

And the Login Model:

function LoginModel() {

    this.loginError = function() {
        navigator.notification.alert('Login Error', // message
        null, // callback
        'Login', // title
        'Done'                  // buttonName
        );
        goLogin();
    };

    this.isLogged = function(tx, results) {
        //ajax code
    };

    this.checkLogin = function(tx) {
        alert('checkLogin: Variable TX = '+ tx);
        tx.executeSql('SELECT * FROM login', [], this.isLogged, this.loginError);
    };

}

This is the code I have at the moment to control the start work-flow. The problem is when i call in mainModel.js this.database.transaction(this.login.checkLogin, goLoggin); it won’t do nothing. When I change this.login.checkLogin to this.login.checkLogin() it works but the tx variable go as undefined.

I’m probably doing something wrong here but I don’t know why. Maybe JavaScript OOP isn’t supported with phonegap, thing that I don’t truly believe.

Can you help?

Thanks in advance,
Elkas

Answer 1

The problem is that when you say this.login.checkLogin, you are getting a reference to the function but losing the reference to the object this.login which you want associated with the function. This is one of the fundamental properties of Javascript that you have to understand completely or you will always be confused when working with Javascript.

This is exactly what Function.prototype.bind is for. It is not available natively in older browsers (so most Javascript frameworks have their own implementation), but since you’re using PhoneGap, you’re probably targeting a modern mobile WebKit browser.

What Function.prototype.bind does is bundle a function and an object together into a self-contained “method reference”. Internally, a method reference is simply a function that invokes your original function as a method of your object.

Here’s how you would use it:

this.database.transaction(this.login.checkLogin.bind(this.login), goLoggin);

Again, what you’re saying there is “bind checkLogin to this.login and give it back to me as a method reference, not just as a detached function”.

(Coincidentally, I kind of invented Function.prototype.bind. I described it in an old article called “Object-Oriented Event Listening through Partial Application in Javascript”, it was one of the first utilities to be included in Prototype, and now it’s been standardized in ECMAScript 5. For a more detailed explanation, you could probably dig up that article somewhere.)