Come creare CSS dinamico in base all'input dell'utente

Un utente dovrebbe essere in grado di progettare una stanza (la stanza è un modello) nella mia app Rails. Quando l'utente visita lo myapp.com/room/1 viene mostrata la stanza con il suo contenuto e il suo design specifico.Come creare CSS dinamico in base all'input dell'utente

Il design o il CSS della camera si basa sui parametri della stanza (colore1, colore2, ...) e alcune caratteristiche di progettazione generate casualmente (tipo di carattere, bordo dell'immagine, ...). Queste caratteristiche vengono memorizzate nel modello di stanza quando la stanza viene salvata.

Non vedo come posso generare un CSS specifico per ogni stanza. Quando l'utente visita la myapp.com/room/1, la mia app dovrebbe creare CSS (o SCSS) specifici per room1. Dove (quale controller) dovrei costruire quel CSS?

Grazie

fonte

2014-12-12 Tarscher

come è la definizione negozio di design? Che tipo di informazione è definita? –

Questa è una domanda chiara per coloro che hanno programmato in Rails. –

È possibile effettuare la RoomsController rispondere al formato CSS, nonché al fine di arrivare a questo lavoro:

# 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

allora avete bisogno di implementare un modello da rendere per il formato CSS :

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

Nota come questo è molto simile a un modello normale. È necessario assicurarsi che questo si traduca in CSS valido.

È necessario assicurarsi che il foglio di stile sia incluso quando l'utente visita la pagina. Supponiamo che un utente possa sfogliare il design della propria stanza quando visita il numero /rooms/1. Questo renderà un modello HTML, che potremmo definire come segue:

<!-- 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>

Si noti che ho usato content_for tutto il tag link foglio di stile. Possiamo usare questo per assicurarsi che il tag link foglio di stile è reso bene nella testa del layout:

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

Naturalmente avrete bisogno di compilare i dettagli da soli, ma questo sarebbe l'approccio più logico per il problema.

fonte

2014-12-15 20:04:49 fivedigit

la mia regola css è abbastanza coplex (render chart). Devo scrivere a scss. C'è un modo per renderizzare template come 'app/views/rooms/show.css.scss.erb' e quindi compilare scss in css? – new2cpp

Se si progetta il controller per rispondere all'azione spettacolo con richieste di JSON, sarete in grado di recuperare gli attributi dell'oggetto Camera in formato 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"}

In In tal caso, è possibile utilizzare javascript per rendere get request, recuperare i dati in JSON e successivamente utilizzare tali dati per manipolare il dom.

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

fonte

2014-12-15 20:42:08 YoursTruly

Come creare CSS dinamico in base all'input dell'utente

risposta

Problemi correlati