RequireJS share array with main.js

Question

Edit: I figured out the solution to my problem. There were two issues, first, setting lotInfo in my init function was creating an undefined reference. Second, in my lot-plan.js file I wrapped it in "require" but it's needs to be defined as a module so switching require() to define() makes the var accessible.

1. return the desired var in lot-plan.js as the user below suggested.

2. Change

   require([ 'raphael' ], function(Raphael){

to

define([
'raphael'
], function(Raphael){

and remove the reference to lotInfo here

post_type_archive_plans:{
        init: function(lotInfo){
    // Need the suites var created in lot-plan
        }
    }

Original Post

I'm building a site with requirejs and i'm looking to share an external js file with my main.js file. I've separated this code because it's a raphael svg and is just a bunch of gross code I don't want in my main.js. What I DO want, in my main.js is the array this file creates.

FYI this is using a pattern from paul irish

Modified http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/ Only fires on body class (working off strictly WordPress body_class)

Require Config

require.config({

paths: {
    jquery: [
        '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
        '../bower_components/jquery/jquery.min'
    ],
    underscore: [
        '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min',
        '../bower_components/underscore/underscore-min'
    ],
    fastclick: [
        '//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.10/fastclick.min',
        '../bower_components/fastclick/lib/fastclick'
    ],
    spinjs: [
        '//cdnjs.cloudflare.com/ajax/libs/spin.js/1.3.2/spin.min',
        '../bower_components/spinjs/spin'
    ],
    waitforimages: [
        '../js/lib/jquery.waitforimages.min'
    ],
    backgroundCheck: [
        '../bower_components/backgroundCheck/background-check.min'
    ],
    raphael: [
        '//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min',
        '../bower_components/raphael/raphael-min'
    ],
    swipe: [
        '//cdnjs.cloudflare.com/ajax/libs/swipe/2.0/swipe.min',
        '../bower_components/swipe/swipe'
    ],
    lotInfo: "lot-plan",
    app: 'app'
},
shim: {
    underscore: {
        deps: ['jquery'],
        exports: '_'
    },
    waitforimages: {
        deps: ['jquery']
    },
    app: {
        deps: ['jquery', 'underscore', 'fastclick', 'spinjs', 'waitforimages', 'backgroundCheck', 'raphael', 'swipe', 'lotInfo']
    }
}
});

require([
'jquery',
'fastclick',
'underscore',
'spinjs',
'waitforimages',
'backgroundCheck',
'raphael',
'swipe',
'lotInfo',
'app'
]);

So, all of these files i'm loading are just libraries, but the last file i'm loading, "lotInfo" is the raphael svg file. Keep in mind everything loads fine and on the proper pages. Here is the wrapper for the lot-plan.js file, so you can see how it's made.

require([
'raphael'
], function(Raphael){ if( $('#lot-plan').length ){


// Init
var rsr = Raphael('lot-plan', '452.978', '440.978');

blah blah blah a bunch of code....

var suites = [suite_a4east, suite_a5east, suite_a8east, suite_a9east, suite_a10east, suite_a4west, suite_a9west, suite_a10west, suite_b1east, suite_b2east, suite_b1west, suite_b2west, suite_b3west, suite_b6west, suite_c7, suite_d8, suite_e3, suite_e6, suite_f7, suite_d5];


}// if lot-plan exists
});// require

And you'll see the suites var at the bottom, That is the var I want to access in my app.js file. This is how I am loading my code per page.

require([
'jquery',
'underscore',
'fastclick',
'spinjs',
'waitforimages',
'backgroundCheck',
'raphael',
'lotInfo',
'swipe'
], function($, _, FastClick, Spinner, waitforimages, BackgroundCheck, Raphael, lotInfo, swipe){
'use strict';


// Modified http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/
// Only fires on body class (working off strictly WordPress body_class)

var appname = {

    // All pages
    common: {
        init: function() {
                        //Would execute on all pages
                    }
            }
            post_type_archive_plans:{
        init: function(lotInfo){
    // Need the suites var created in lot-plan
        }
    }

So in post_type_archive_plans is where i need to grab that suites var. If anybody has any tips for me that would be great! If you need any more info let me know.

Thanks!

Answer 1

Assuming #lot-plan is not dynamically loaded, you're almost there. Just return the suites array as part of the lotInfo module.

In lot-plan.js do:

var suites = ...

return { suites: suites }

And in app.js:

init: function(lotInfo){
    var suites = lotInfo.suites
}