CODEWITHSUNDEEP
jqueryrequirejs
GK_
GK_

Reputation: 1222

requireJS method calling in define

I need to know 2 doubts in using requireJS.

My Code:

1. Index.html

<script data-main="js/main" src="js/require.js"></script>

2.main.js

require(['../page1', '../global'], function(View,global){    
var v = new View();
v.init();  

var g = new global();
g.getlanguage();  
});

3.page1.js

define([], function (require) {
 var view1 = function(){
  this.init = function(){
    $('.page__submit').on('click', function(e) {
          view1.new_submit();
          e.preventDefault();
        });
  },
   this.new_submit = function(){
   alert("new submit in..");
  }
};
return view1;
});

Question 1: In page1.js onclick view1.new_submit(); is not working. how to call the method? Question 2: I have initialized **global** in **main.js**, But i couldn't access the global inside the page1.js. Please help.

Upvotes: 0

Views: 48

Answers (1)

Shakespeare
Shakespeare

Reputation: 1286

For Question 1, you just need to address how you are accessing this, so I made a reference using self that should allow you to call on itself in the below example code.

For Question 2, you need to require the global module in your page1 module so you can use it, so I've added the dependency. Please note you may need to alter the path of ../global to match your relative structure. Please see edit for alternative approach to this question.

define(['../global'], function (g) {

    var view1 = function() {
        var self = this;

        self.init = function() {
            console.log(g.getLanguage());

            $('.page__submit').on('click', function(e) {
                self.new_submit();
                e.preventDefault();
            });
        },

        self.new_submit = function() {
            alert("new submit in..");
        }
    };

    return view1;
});

EDIT or alternatively for Question 2, you could add global as an argument to init of the View, but this is dependent on how you want to actually use the module. It would look like this: -

Inside main.js

var g = new global();
g.getlanguage();

var v = new View();
v.init(g);

Inside page1.js

self.init = function (g) { // g is the module reference
    console.log(g.getLanguage());

    $('.page__submit').on('click', function(e) {
        self.new_submit();
        e.preventDefault();
    });
},

And finally I would like to mention that having a module called global might confuse future developers who pick up that code. I'm not sure what the modules responsibility would be, but consider renaming it to be clearer.

Alternatively you may be looking to actually make this global for some reason. In this case, just attach it to the window object by assigning it in main.js, which would go like window.global = g; just afer your g.getLanguage();. It may be wise to make global some defined object prior to the Require JS init in its own script file, for example, defining it as a global variable before the require script tag: -

<script src="js/global-module.js"></script>
<script data-main="js/main" src="js/require.js"></script>

And tweaking your global module to ensure it is generic (and therefore clear you intend it not to be AMD): -

var global = {
    property: 'value',
    myFunction: function () {
        // etc.. Don't know what format you want or what is in global.
    }
};

window.global = global;

PS if you are making global a global variable, then consider namespacing it to avoid collisions with other code, e.g. myAppNameGlobalModule instead of just global.

Upvotes: 1

Related Questions