jQuery-Mobile流星樣本集成和/或集成指南

流星給我留下了深刻的印象，並希望將它與jQuery-Mobile結合使用。我想知道是否有人已經構建了一個示例集成應用程序。如果沒有，一些指導方針會很好。jQuery-Mobile流星樣本集成和/或集成指南

問候，

塞德里克

2012-04-13 Cédric Vidal

我也對此感興趣，並一直試圖將其整合。 jQuery Mobile初始化頁面並在加載時修改DOM。然後流星初始化並將其自己的html添加到DOM和這些衝突。在'mobileinit'事件中設置'$ .mobile.autoInitializePage = false;'應該避免發生這種情況。這就像我已經得到。如果/當我拿出一份完整的樣本/指南時，將會用答案更新。 – rmarscher 2012-04-22 19:29:17

只需將jquery.js和jquery-mobile.js放在/ client目錄中即可。這樣他們比其他腳本加載更晚。不要從包中使用jquery。我嘗試過在其他答案中提到的包裝jquery-mobile，但由於流星的JavaScript加載順序，我遇到了更多麻煩。 – 2012-07-07 02:16:53

我想知道這個問題，以及，所以我做了一個示例應用程序：

http://jqmdemo.meteor.com/

它似乎運作良好。你可以在這裏找到源代碼：

https://github.com/snez/jqm-meteor

使用兩個在一起時，有幾個陷阱，請參閱代碼中的註釋。

UPDATE：它看起來像meteor.com正在滾動升級到流星框架打破那裏的舊代碼。僅將此項目用作參考，因爲有更好的方法可以使用較新的框架版本完成相同的工作。

來源

2012-09-11 20:42:02 snez

很酷，很好的工作！ – 2012-11-08 21:45:37

這個程序不起作用。我得到'更新失敗：訪問被拒絕。因此，我無法驗證這實際上是否解決了@rmarscher提到的問題：如果您打開了兩個瀏覽器並修改了其中的一個值，流星將更新html並更改jQuery移動版的更改。 – jchook 2013-06-24 03:20:33

有關信息，演示的更新的工作版本可在http://jqmdemo.meteor.com/找到。 – 2015-07-18 17:10:04

我建議採取看看jQuery的包中的文件夾/packages/jquery。

所有這些都是將jquery.js文件添加到文件堆棧中以發送到客戶端。如果你是在這之後，你可以添加自己的包名爲jquery-mobile幷包含它所需的文件。

見它是如何工作的package.js文件：

https://github.com/meteor/meteor/blob/master/packages/jquery/package.js

所以只需添加移動文件到您的jQuery移動封裝，這樣做：

Package.on_use(function (api) { 
    api.add_files('jquery.mobile-1.1.0.min.css', 'client'); 
    api.add_files('jquery.mobile-1.1.0.min.js', 'client'); 
});

來源

2012-04-13 15:49:11 jonathanKingston

哦，然後通過使用「流星添加」或將其添加到您的應用程序目錄中的.meteor/packages文件中 – jonathanKingston 2012-04-13 15:51:19

另外，如果您從N1mmy閱讀流星開發者之一的回覆，他建議API將改變： http://stackoverflow.com/questions/10114526/how-to-build-a-meteor-package 因此，我可能會建議將本地文件包含在js文件中，而不是放入您的模板中。 – jonathanKingston 2012-04-13 16:41:06

我沒有當我試圖將客戶端目錄中的框架文件打包時，能夠讓jQuery Mobile工作。 Meteor在嘗試設置DOCTYPE的JS文件上拋出一個錯誤，甚至是從未引用過的示例文件夾中的文件。通過使用CDN託管的版本和禁用autoInitializePage（如上面註釋中所述），我可以在不訪問任何未公開的API的情況下工作。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
<script type="text/javascript"> 
    $(document).bind("mobileinit", function(event, data){ 
      $.mobile.autoInitializePage = false; 
    });  
</script>

來源

2012-07-29 14:02:34 ashack

jQuery-Mobile流星樣本集成和/或集成指南

回答

相關問題