DracoBlue / jsb

A very extendable Toolkit to inject Javascript Behaviour into rendered HTML without Inline Javascript. (jsb was formerly known as JsBehaviourToolkit)
http://dracoblue.net
Other
52 stars 8 forks source link

Fix requirejs integration #18

Closed DracoBlue closed 10 years ago

DracoBlue commented 10 years ago

The current requirejs integration, does not work 100% like a common AMD module.

At the moment, you have to include jquery (if required) and jsb right after each other in synchronous script-tags to make sure, that jsb works properly.

@graste had some other issues with the current requirejs, which shall be fixed with this issue, too.

eberdt commented 10 years ago

i believe we hasn't this situation that we load each other like this and we have no problems atm.

Configuration:

requirejs.config({
   jquery: 'lib/jquery-1.9.1.min',
   JsBehaviourToolkit: 'lib/JsBehaviourToolkit-1.7.0',
   shim: {
        JsBehaviourToolkit: {
            exports: 'jsb'
        },
        jquery: {
            exports: 'jQuery'
        },
   }
}

define([ 'jqueryUI', 'JsBehaviourToolkit', 'JsbEvents'], function() {
        console.log("loading libs")
});
DracoBlue commented 10 years ago

I use this at the moment (to be sure that jquery is first one!):

<script src="./static/bower_components/requirejs/require.js"></script>
<script>
    requirejs.config({
        baseUrl: './static/js/',
        urlArgs: "cb=" + (new Date()).getTime(),
        paths: {
            jquery: './../bower_components/jquery/jquery',
            jsb: './../bower_components/jsb/JsBehaviourToolkit'
        }
    });

    requirejs(['jquery'], function() {
        require(['jsb'], function() {
            jsb.applyBehaviour(document.body);
        });
    });
</script>
eberdt commented 10 years ago

this should solve it atm:

<script src="./static/bower_components/requirejs/require.js"></script>
<script>
    requirejs.config({
        baseUrl: './static/js/',
        urlArgs: "cb=" + (new Date()).getTime(),
        paths: {
            jquery: './../bower_components/jquery/jquery',
            jsb: './../bower_components/jsb/JsBehaviourToolkit'
        },
        shim: {
            jsb: {
               exports: 'jsb'
               deps: ['jquery']
            },
            jquery: {
                exports: 'jQuery'
            },
         }
    });

    requirejs(['jquery', 'jsb'], function() {
        jsb.applyBehaviour(document.body);
    });
</script>
graste commented 10 years ago

I'm too using shims like @eberdt suggested. Works fine, but we should probably aim for being Node, AMD and browser globals compatible by using one pattern of the https://github.com/umdjs/umd repository. E.g. this one: https://github.com/umdjs/umd/blob/master/returnExportsGlobal.js

Also see my remarks in #14 and perhaps close that ticket or merge it into this.