Home/ Questions/Q 8891479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T22:45:27+00:00

I’m slowly getting desperate on this one. I have a project where I use

  • 0

I’m slowly getting desperate on this one. I have a project where I use RequireJS to separate my JS code. I’ve managed to get this up and running, but now I’m having difficulties with the iscrollview library. This provides an implementation of iScroll to use in jQuery Mobile websites. Here is some code to sketch my situation:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>iscrollview</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="js/lib/jquery-mobile/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" type="text/css" href="js/lib/iscrollview/iscrollview.css" />
        <script type="text/javascript" data-main="js/main.js" src="js/lib/require/require-2.1.1.min.js"></script>
    </head>

    <body>
        <div data-role="page">

            <div data-role="header">
                <h1>Header</h1>
            </div>

            <div data-role="content">
                <div data-iscroll>
                    <!-- this contains some long content (long enough to trigger scrolling) -->
                </div>
            </div>

            <div data-role="footer">
                <h2>Footer</h2>
            </div>

        </div>
    </body>
</html>

js/main.js:

requirejs.config({
    baseUrl: 'js',
    paths: {
        jquery: 'lib/jquery/jquery-1.8.2.min',
        jquerymobile: 'lib/jquery-mobile/jquery.mobile-1.2.0.min',
        iscroll: 'lib/iscroll/iscroll',
        iscrollview: 'lib/iscrollview/iscrollview'
    },
    shim: {
        jquerymobile: {
            deps: ['jquery']
        },
        iscroll: {
            deps: ['jquerymobile']
        },
        iscrollview: {
            deps: ['iscroll']
        }
    }
});

requirejs(['jquery','jquerymobile','iscroll','iscrollview'], function($){

    /* I would expect that the correct JS files are loaded by the time we get here,
       so the iscrollview.js should recognize the data-trim attribute which I've applied
       earlier in index.html but unfortunately this doesn't happen in this implementation. /*

});

I hope I’ve pointed out my problem well enough for you guys to have a go out. Really appreciate the effort you put in to it!

Edit:

You can find the (simplified) project here.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After looking at your .zip project I finally found the answer.
    The iscrollview.js is self-initting, which you can see on line 1839 of the iscrollview.js file.
    The self initialisation depends on the “pagecreate” event, which obviously already fired, when require.js loads in the file.
    So the solution is to init iscrollview on our own

    requirejs.config({
    baseUrl: 'js',
    paths: {
        jquery: 'lib/jquery/jquery-1.8.2.min',
        jquerymobile: 'lib/jquery-mobile/jquery.mobile-1.2.0.min',
        iscroll: 'lib/iscroll/iscroll',
        iscrollview: 'lib/iscrollview/iscrollview'
    },
    shim: {
        jquerymobile: {
            deps: ['jquery']
        },
        iscroll: {
            deps: ['jquerymobile']
        },
        iscrollview: {
            deps: ['iscroll']
        }
    }
});

requirejs(['jquery','iscroll','jquerymobile','iscrollview'], function($, iScroll){
    var elements = jQuery(document).find(":jqmData(iscroll)");
    elements.iscrollview();
});
    • 0