레일즈를 배울 수있는 작은 블로그 앱을 만들고 있습니다 - 사용자는 로그인하여 다른 사용자의 게시물에 댓글을 달거나 댓글을 달 수 있습니다. 지금 저는 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입니다!
에 대해서는 항목 2 :
은 또한 당신이 DOM에 삽입하기 전에 노드를 구축하고 그 속성을 조작하는 것이 더 효율적입니다 그? @comment에 대한 부분이 있으므로 짝수/홀수 사이클은 모든 아약스 호출에서 재설정됩니다. 그리고 DOM 팁 주셔서 감사합니다! – Fernando
답변을 업데이트했습니다. Google에는 CSS3 제브라 스트라이핑에 대한 많은 자습서가 있습니다. – davidfurber
흠 ... 지금 나는 그것을 얻는다, 고마워! – Fernando