包括與RequireJS和jQuery Mobile iscrollview.js

我在這個慢慢地變得絕望。我有一個項目，我使用RequireJS來分離我的JS代碼。我已經設法啓動並運行，但現在我在iscrollview庫中遇到了問題。這提供了在jQuery Mobile網站中使用的iScroll的實現。下面是一些代碼來勾畫我的情況：包括與RequireJS和jQuery Mobile iscrollview.js

的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. /* 

});

我希望我已經指出了我的問題不夠好，你夥計們去出去。真的很感謝你付出的努力！

編輯：

你可以找到（簡體）項目here。

來源

2012-11-22 Bram W.

看完你的.zip項目後，我終於找到了答案。 iscrollview.js是自我啓動的，您可以在iscrollview.js文件的第1839行中看到它。自我初始化取決於「pagecreate」事件，當require.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(); 
});

來源

2012-11-26 08:41:57

謝謝您的回答。不幸的是，這似乎並沒有改變我所遇到的問題。 –

好的，你能提供一個包含你的項目的.zip文件嗎？我只是臨時回答，但現在我想再玩一次。 –

我添加了一個下載鏈接到我原來的帖子。 –

包括與RequireJS和jQuery Mobile iscrollview.js

回答

相關問題