Tworzenie dynamicznego CSS na podstawie danych wprowadzanych przez użytkownika

Użytkownik powinien mieć możliwość zaprojektowania pokoju (pokoju to model) w mojej aplikacji Rails. Gdy użytkownik odwiedza myapp.com/room/1, zostanie pokazane pomieszczenie z zawartością i konkretnym projektem.Tworzenie dynamicznego CSS na podstawie danych wprowadzanych przez użytkownika

Projekt lub CSS pokoju opiera się na parametrach pomieszczenia (kolor 1, kolor 2, ...) i niektórych losowych wygenerowanych cechach projektu (rodzaj czcionki, obramowanie obrazu, ...). Te cechy są przechowywane w modelu pomieszczenia, gdy pomieszczenie jest zapisane.

Nie widzę sposobu, w jaki mogę wygenerować określony arkusz CSS dla każdego pomieszczenia. Gdy użytkownik odwiedza myapp.com/room/1, moja aplikacja powinna zbudować określony CSS (lub SCSS) dla pokoju1. Gdzie (jaki kontroler) powinienem zbudować ten CSS?

Dzięki

Źródło

2014-12-12 Tarscher

Jaka jest definicja projektu sklepu? Jakiego rodzaju informacje są zdefiniowane? –

To jest jasne pytanie dla tych, którzy zaprogramowali w Railsach. –

Można dokonać RoomsController odpowiedzieć na formacie CSS, a także w celu uzyskania to do pracy:

# app/controllers/rooms_controller.rb 
class RoomsController 
    def show 
    @room = Room.find(params[:id]) 

    respond_to do |format| 
     format.html 
     format.css 
    end 
    end 
end

Następnie trzeba zaimplementować szablon mają być świadczone dla formatu CSS :

/* app/views/rooms/show.css.erb */ 
.room { 
    background-color: <%= @room.color1 %>; 
    color: <%= @room.color2 %>; 
}

Zobacz, jak to jest bardzo podobne do zwykłego szablonu. Musisz się upewnić, że spowoduje to poprawny CSS.

Musisz upewnić się, że arkusz stylów jest dołączany, gdy użytkownik odwiedza stronę. Załóżmy, że użytkownik może przeglądać projekt swojego pokoju po odwiedzeniu /rooms/1. Spowoduje to szablon HTML, który możemy zdefiniować następująco:

<!-- app/views/rooms/show.html.erb --> 
<% content_for :stylesheet_includes do %> 
    <%= stylesheet_link_tag(room_path(@room, format: :css)) %> 
<% end %> 

<div class="room"> 
    Room Contents Here 
</div>

Zauważ, że mam używany content_for wokół znacznika łącza arkusza stylów. Możemy to wykorzystać, aby upewnić się, że połączenie stylów tag staje się przyjemnie w głowie układ:

<!-- app/views/layouts/application.html.erb --> 
<head> 
    <%= yield :stylesheet_includes %> 
</head>

Oczywiście trzeba podać dane siebie, ale to byłoby najbardziej logiczne podejście do problem.

Źródło

2014-12-15 20:04:49 fivedigit

moja reguła css jest dość coplex (renderowanie wykresu). Muszę napisać do scss. Czy istnieje sposób renderowania do szablonu takiego jak "app/views/rooms/show.css.scss.erb", a następnie skompilowanie scss do css? – new2cpp

Jeśli projekt kontrolera do reagowania na akcji show z żądań json, będziesz mógł odzyskać atrybuty obiektu Room w formacie JSON

http://localhost.com:3000/rooms/1.json

{"id":1,"color1":"black","color2":"green","created_at":"2014-12-15T19:52:21.235Z","updated_at":"2014-12-15T19:52:21.235Z"}

W w tym przypadku możesz użyć javascript do utworzenia get request, pobrać dane w JSON, a następnie użyć tych danych do manipulowania domem.

$.get("rooms/1.json", function(data) { alert(data); });

Źródło

2014-12-15 20:42:08 YoursTruly

Tworzenie dynamicznego CSS na podstawie danych wprowadzanych przez użytkownika

Odpowiedz

Powiązane problemy