사용자 입력을 기반으로 동적 CSS를 만드는 방법

사용자는 내 Rails 앱에서 방 (방이 모델 임)을 디자인 할 수 있어야합니다. 사용자가 myapp.com/room/1을 방문하면 내용이있는 방과 특정 디자인이 표시됩니다.사용자 입력을 기반으로 동적 CSS를 만드는 방법

룸의 디자인 또는 CSS는 룸 매개 변수 (color1, color2, ...) 및 임의의 생성 된 디자인 특성 (글꼴 유형, 이미지 테두리, ...)을 기반으로합니다. 이러한 특성은 룸을 저장할 때 룸 모델에 저장됩니다.

각 방의 CSS를 어떻게 생성 할 수 있는지 알 수 없습니다. 사용자가 myapp.com/room/1을 방문하면 내 응용 프로그램이 room1에 대해 특정 CSS (또는 SCSS)를 작성해야합니다. CSS (컨트롤러)는 어디에 설치해야합니까?

감사

출처

2014-12-12 Tarscher

저장 디자인 정의는 어떻게됩니까? 어떤 종류의 정보가 정의되어 있습니까? –

이것은 레일스에서 프로그래밍 한 분명한 질문입니다. –

이이 작동되도록하기 위해서뿐만 아니라 CSS 형식으로 RoomsController 응답을 할 수 있습니다 :

# 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

는 그런 다음 CSS 형식으로 렌더링 할 템플릿을 구현해야 :

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

이것은 일반적인 템플릿과 매우 유사합니다. 이 결과로 유효한 CSS가 생성되는지 확인해야합니다.

사용자가 페이지를 방문 할 때 스타일 시트가 포함되어 있는지 확인해야합니다. /rooms/1을 방문했을 때 사용자가 방 디자인을 탐색 할 수 있다고 가정 해 보겠습니다. 나는 스타일 시트 링크 태그 주위에 content_for을 사용했습니다

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

주의 사항 :이 다음과 같이 우리가 정의 할 수있는 HTML 템플릿을 렌더링합니다. 우리는 확실히 스타일 시트 링크 태그는 레이아웃의 머리에 잘 표현되어 있는지 확인하려면이 옵션을 사용할 수 있습니다 물론

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

당신이 세부 사항을 직접 입력해야하지만이에 대한 가장 논리적 인 방법이 될 것입니다 문제. 당신이 JSON 요청과 함께 show 액션에 대응하는 컨트롤러를 설계하는 경우

출처

2014-12-15 20:04:49 fivedigit

내 css 규칙은 꽤 coplex (차트 렌더링)입니다. 나는 scss에 글을 써야한다. 'app/views/rooms/show.css.scss.erb'와 같은 템플릿으로 렌더링 한 다음 CSS를 scss로 컴파일하는 방법이 있습니까? – new2cpp

것은, 당신은에서 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"}

에서 객실 객체의 속성을 검색 할 수 있습니다 이 경우에는 javacript를 사용하여 get request을 만들고 JSON에서 데이터를 검색 한 다음 해당 데이터를 사용하여 DOM을 조작 할 수 있습니다.

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

출처

2014-12-15 20:42:08 YoursTruly

사용자 입력을 기반으로 동적 CSS를 만드는 방법

답변

관련 문제