RequireJS share array with main.js

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

   Read More

   • WooCommerce: get_current_screen not working with multi language
   • Can’t login on WordPress
   • WordPress: Ajax not working to insert, query and result data

   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!