2013-06-12 1 views
1

레일즈를 배울 수있는 작은 블로그 앱을 만들고 있습니다 - 사용자는 로그인하여 다른 사용자의 게시물에 댓글을 달거나 댓글을 달 수 있습니다. 지금 저는 Ajax를 '귀하의 코멘트 추가하기'페이지에 추가하고 있으며 약간의 디자인 문제가 있습니다.레일즈 - AJAX 추가시 커플 링 줄이기

# post section 
:post.title here 
:post.username here 
:post.created_at here 
:post.body here 

# comments section (sorted by date of creation): 
:number of comments here 

:first comment 
:second comment 
... 
:last comment 

# add comment section 
:text_area here 
:submit button here 

문제점 : 페이지 흐름은 다음과 같습니다

- 1의 의견은 창조의 날짜별로 정렬, 그래서 내 아약스 호출은 페이지의 상단에 새 코멘트 을 추가합니다. 정렬 동작을 변경하면 아약스 코드가 파손됩니다.

2 - A 의견 div은 .odd, .even 또는 .admin (admin 사용자가 주석을 작성한 경우 홀수/짝수 또는 admin을 적용)의 세 가지 CSS 클래스를 가질 수 있습니다. 지금 당장은이 클래스 이름을 하드 코딩하고 올바른 이름을 얻기 위해 일부를 사용하고 있습니다. 이것은 나쁘다. css 클래스 이름을 변경하면 아약스 코드가 파손된다.

어떻게 이러한 문제를 피할 수 있습니까? 아니면 적어도 개선 할 수 있습니까? 어떤 도움

var div = $('#comments_div'); 
var comment_class = div.children().first().attr('class') 
var new_class; 

<% if current_user.admin == 1 %> 
    new_class = 'comment_body_admin' 
<% else %> 
if (comment_class === 'comment_body_odd') 
    new_class = 'comment_body_even' 
else 
    new_class = 'comment_body_odd' 
<% end %> 

var new_div = $('#comments_div').prepend("<%= j render @comment %>"); 
new_div.children().first().attr('class', new_class) 

감사 : 여기 내 create.js.erb입니다!

답변

0

1 - 작성한 주문을 취소하는 것 이외에 의견 정렬을 어떻게 변경 하시겠습니까? 이 경우 create.js.erb가 정렬 순서를 인식하도록하고 prepend 대신 append를 사용해야합니다.

2 - 관리자에게는 'admin'클래스를 적용하고 짝수 번째 스트라이핑은 CSS로 남겨 둡니다. 이런 식으로 뭔가를 해야지 그것을 할 : 내가 어떻게 할 수,

var comment = $("<%= j render @comment %>").addClass('comment') 
comment.addClass(new_class) 
$('#comments_div').prepend(comment) 
+0

에 대해서는 항목 2 :

.comment:nth-child(2n) { background: #eeeeee; } 

은 또한 당신이 DOM에 삽입하기 전에 노드를 구축하고 그 속성을 조작하는 것이 더 효율적입니다 그? @comment에 대한 부분이 있으므로 짝수/홀수 사이클은 모든 아약스 호출에서 재설정됩니다. 그리고 DOM 팁 주셔서 감사합니다! – Fernando

+0

답변을 업데이트했습니다. Google에는 CSS3 제브라 스트라이핑에 대한 많은 자습서가 있습니다. – davidfurber

+0

흠 ... 지금 나는 그것을 얻는다, 고마워! – Fernando