9

Integruję moją aplikację Rails 3.1 z aplikacją jQuery mobile (obecnie w wersji Beta 2) i nie jestem pewien, jak zorganizować mój CSS w JS &.Rails 3.1 i jQuery mobile: Najlepszy sposób na uporządkowanie JS i CSS przy rozważaniu potoku aktywów?

mam to w tagu głowy mojego application.mobile.erb za (kopiowane bezpośrednio z http://jquerymobile.com/download/):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> 

powinienem umieścić mój stylesheet_link_tag dla „aplikacji” tuż nad tym, więc moje style CSS nie zastępują Ciekawy CSS w jQuery mobile? A co z plikiem javascript_include_tag dotyczącym "aplikacji"?

A może to wszystko powinno być całkowicie oddzielne?

Po prostu nie jestem pewien, jak zorganizować to wszystko/jeśli istnieje konwencjonalny sposób na zrobienie tego. Wejście docenione.

(. Proszę pytać o więcej szczegółów jeśli potrzebujesz)

EDIT: * Jestem również zastanawiasz się, gdzie umieścić moje mobile specyficzne JS i CSS ...

Odpowiedz

6

Istnieje teraz jQuery Mobile Ruby gem, dzięki któremu pliki jQuery Mobile będą dostępne w potoku zasobów.

Instalacja jest łatwa. Wystarczy dodać gem do aplikacji Gemfile

gem "jquery-mobile-rails" 

i uruchomić bundle install. Następnie można dodać

//= require jquery.mobile 

do application.js lub gdziekolwiek indziej chcesz dołączyć pliki.

+0

Ten klejnot jest podobny i może być również przydatny. https://github.com/dbloete/jquery_mobile-rails – Pygmalion

+0

Dzięki - na pewno wypróbuję to, gdy dostanę szansę. – dmonopoly

+0

Link nie jest już vaild. – Meier

1

To naprawdę twoja decyzja o tym, co chcesz mieć pierwszeństwo. Niektóre rzeczy mogą mieć pierwszeństwo przed innymi, tylko w oparciu o porządek, który nazywamy rzeczami (jeśli funkcja jest wywoływana w pliku2, upewnij się, że plik1, który definiuje tę funkcję, jest zawarty przed nią).

Jeśli chodzi o sposób pracy z asset_pipeline, możesz pobrać te zasoby samodzielnie i połączyć je w application.css/application.js lub zachować je w <head> w kolejności, która działa dla ciebie.

6

Podobnie jak ty, byłem bardzo zdezorientowany, aby dowiedzieć się, jak korzystać z jQuery Mobile (teraz ostateczny 1.0) z nowym potokiem aktywów Rails 3.1.

Najpierw należy przenieść jquery.mobile.js i jquery.mobile.css odpowiednio do zasobów/javascripts i asset/stylesheets.

drugie, wstawić "wymagają jquery.mobile" do swoich application.js oczywistych

//= require jquery 
//= require jquery_ujs 
//= require jquery.mobile 

i to samo na swojej application.css manifeście:

*= require_self 
*= require_tree . 
*= require jquery.mobile 

trzecie, put „application.js "i" application.css "do layoutu, application.html.erb

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<%= javascript_include_tag "application" %> 
<%= stylesheet_link_tag "application" %> 
<%= csrf_meta_tags %> 

Po czwarte, nie zapomnij dodać linii "meta name ~~~", aby działała poprawnie.

<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport"> 

Należy również poprawnie używać właściwości mobilnych jQuery, takich jak "data-role =" strona "" na stronie. Inni polecają używać klejnotów takich jak "jquery-mobile-rails" lub podobnych, ale ja bym tego nie zrobił.

+1

To jest proste i znacznie mniej tajemnicze niż przy użyciu klejnot jquery-mobile-rails. Dziękuję Ci. –

Powiązane problemy