Accessing a different function within an array of functions

Question

Accessing a different function within an array of functions

I am currently using require.js and have a collection of functions that I utilize in various locations. The way I define these functions is as follows:

define(function (require) {

    "use strict";

    var $ = require('jquery');

    var UsefulFuncs = {};

    UsefulFuncs.hideAlert = function() {
        $('.alert').hide();
    };


    UsefulFuncs.loadURL = function (url){
            navigator.app.loadUrl(url, { openExternal:true });
            return false; 
    };


    UsefulFuncs.linkClicked = function (e) {    
        e.preventDefault();
        var url = $(e.currentTarget).attr("rel"); 
        this.loadURL(url);
    };


    return UsefulFuncs;

});

Then, within my backbone view, I invoke a function from the library with:

UsefulFuncs         = require('app/utils/useful_func'),

....

UsefulFuncs.linkClicked

This process works well for any standalone function in the library like hideAlert(). However, when one function in the library references another function, such as linkClicked() calling loadURL(), I encounter an error:

Uncaught TypeError: Object [object Object] has no method 'loadURL'.

Do you have any suggestions on how I can reference loadUrl() properly?

javascript requirejs

Answer 1

Answer №1

It is important to note that when setting UsefulFuncs.linkClicked as a handler for an event, the context of this may vary depending on how the function is called.

If you call the function directly like this:

UsefulFuncs.linkClicked()

The context of this will refer to the UsefulFuncs object, allowing you to use this.loadURL() within the function.

However, if the function is set as an event handler, the context of this may be different, possibly referencing the element that triggered the event. To maintain consistency in the context of this, you can bind the function when assigning it to an event:

element.onclick = UsefulFuncs.linkClicked.bind(UsefulFuncs);

Alternatively, you can avoid using this within the handler by accessing event.currentTarget directly:

UsefulFuncs.linkClicked = function (e) {    
    e.preventDefault();
    var url = $(e.currentTarget).attr("rel"); 
    UsefulFuncs.loadURL(url);
};

Both methods create closures over UsefulFuncs, with the second approach providing a more standardized way of handling the context of this.

Answer 2

It is important to note that when setting UsefulFuncs.linkClicked as a handler for an event, the context of this may vary depending on how the function is called.

If you call the function directly like this:

UsefulFuncs.linkClicked()

The context of this will refer to the UsefulFuncs object, allowing you to use this.loadURL() within the function.

However, if the function is set as an event handler, the context of this may be different, possibly referencing the element that triggered the event. To maintain consistency in the context of this, you can bind the function when assigning it to an event:

element.onclick = UsefulFuncs.linkClicked.bind(UsefulFuncs);

Alternatively, you can avoid using this within the handler by accessing event.currentTarget directly:

UsefulFuncs.linkClicked = function (e) {    
    e.preventDefault();
    var url = $(e.currentTarget).attr("rel"); 
    UsefulFuncs.loadURL(url);
};

Both methods create closures over UsefulFuncs, with the second approach providing a more standardized way of handling the context of this.

Answer 3

Answer №2

Here is a possible solution to your issue:

let myModule = ( function(require) {

    "use strict";

    var $ = require('jquery');

    var hideAlert = function() {
        $('.alert').hide();
    };


    var loadURL = function (url){
            navigator.app.loadUrl(url, { openExternal:true });
            return false; 
    };


    var linkClicked = function (e) {    
        e.preventDefault();
        var url = $(e.currentTarget).attr("rel"); 
        loadURL(url);
    };


    return {
        hideAlert : hideAlert,
        loadURL : loadURL,
        linkClicked : linkClicked
    };

});

Answer 4

Here is a possible solution to your issue:

let myModule = ( function(require) {

    "use strict";

    var $ = require('jquery');

    var hideAlert = function() {
        $('.alert').hide();
    };


    var loadURL = function (url){
            navigator.app.loadUrl(url, { openExternal:true });
            return false; 
    };


    var linkClicked = function (e) {    
        e.preventDefault();
        var url = $(e.currentTarget).attr("rel"); 
        loadURL(url);
    };


    return {
        hideAlert : hideAlert,
        loadURL : loadURL,
        linkClicked : linkClicked
    };

});

Accessing a different function within an array of functions

Answer №1

Answer №2

Similar questions

What is the process for creating a fresh database with the MongoDB Node.JS driver?

How is the time complexity of merging two sorted arrays to create one larger sorted array determined?

Steps to resolve the Uncaught SyntaxError: Unexpected token o in JSON at position 1 issue

I aim to display interconnected information from various APIs in a cohesive manner

Predefined date range is set by the OnChange event of Daterangepicker.js

Issue arises with variable not defined upon submission of ng-change event

Is it possible to navigate between jQuery EditInPlace fields using the Tab key?

Guide on Creating a Popup Window When the User's Cursor Moves Beyond the Webpage Boundary

I am experiencing an issue wherein after using jquery's hover() function, the CSS :hover state is not

There seems to be a problem as exits.success is not a recognized function -

What is the best way to manipulate arrays using React hooks?

I need help figuring out the proper way to establish an indexing path in cosmos db using the nodejs sdk

Adding a div with a canvas element is malfunctioning

Leveraging JSON Data in Highcharts

Ways to utilize/extract data from an enumeration

Streamline event listeners with a pair of attributes

My Express server is having trouble loading the Static JS

Retrieve the second occurrence of a regular expression match

Customizing a Google chart legend to show on hover event

Ensuring Bootstrap v4 Does Not Collapse When Double-Clicked