How to check the appropriate page and load the scripts accordingly using RequireJS

Question

In my web site, I have bunch of JavaScript files, all for different use but the login page only needs the jquery and loginValidate files. When I attach my main.js, it is suppose to load only these two files by checking the conditions. How to do that?

My config file:

requirejs.config({
    baseUrl:"scripts",
    paths:{
        //libraries
        jquery          :"lib/jquery-1.9.0.min",
        jqueryUI        :"lib/jquery-ui-1.9.2.custom.min",
        underScore      :"lib/underscore-min",
        backBone        :"lib/backbone-min",
        //scripts
        appInit         :"js/tasklist",
        loginValidate   :"js/loginValidate"
    },
    shim:{
        "underScore":{
            exports: "_"
        },
        "backBone":{
            exports:"Backbone",
            deps:["underScore"]
        },
        "appInit" : {
            deps:["jquery","jqueryUI","underScore","backBone"]
        },
        "jqueryUI":{
            deps:["jquery"]
        },
        "loginValidate":{
            deps:['jquery']
        }
    }
});

It is only needed on login page:

 require(["jquery","loginValidate"], function($,validate){
        how can i call the loginValidate function?
    });

The loginValidate function:

define(function(){

    var tasklistHandler = function (params) {
       //params take care.. to validate
    };

        $(function(){ // calling internally the function
            var paramsLoginForm = {
                loginForm : $('#tlLoginForm')
            }
        tasklistHandler(paramsLoginForm);
    });

    })

Is this the correct way to do? I am using also Backbone.js to utilise some other page; how can I proceed for those pages?

If you want to load different modules for different pages then this answer will probably help - http://stackoverflow.com/questions/10815454/how-does-requirejs-work-with-multiple-pages-and-partial-views/10816983#10816983 — Simon Smith, Feb 05 '13 at 19:22

score 0 · Answer 1 · answered Feb 06 '13 at 05:28

The problem you have is the lack of "return" in the "factory" function (the callback function you pass to the define call in the last snippet).

Instead you need to have something like this there:

define(function(){
    return function (params) {
       //params take care.. to validate
    };
})

And in your require call you use run the function that is returned to you by factory function:

require(["jquery","loginValidate"], function($, validate){
    var paramsLoginForm = {
        loginForm : $('#tlLoginForm')
    }
    // \|/ that is what is returned by `define`'s callback function.
    validate(paramsLoginForm);
});

How to check the appropriate page and load the scripts accordingly using RequireJS

1 Answers1