我慢慢地对这个感到绝望。我有一个项目,我使用 RequireJS 来分离我的 JS 代码。我已经设法启动并运行了它,但现在我在使用 iscrollview 库时遇到了困难。这提供了在jQuery Mobile网站中使用的iScroll的实现。以下是一些代码来勾勒我的情况:
索引.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. /*
});
我希望我已经很好地指出了我的问题,让你们出去玩一试。非常感谢您为此付出的努力!
编辑:
您可以在此处找到(简化的)项目。
看了你的.zip项目后,我终于找到了答案。iscrollview.js 是自初始化的,您可以在 iscrollview.js 文件的第 1839 行看到。自我初始化取决于"pagecreate"事件,该事件显然已经触发,在需要时.js加载到文件中。所以解决方案是我们自己初始化 iscrollview
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();
});