레일즈에서 erb partial을 사용하여 자바 스크립트를 사용하여 DOM을 추가 - 컨트롤러를 두드리지 않음

Question

각 입력란과 아이콘이 같고 다른 많은 요소가있는 광고 항목이 가변적 인 양식이 있습니다. 기존 광고 항목을 표시하기 위해 뷰의 루프에서 사용되는 _line_item.html.erb 부분이 있습니다.

하단에있는 버튼을 클릭하면 새 빈 광고 항목이 페이지에 추가됩니다. 그러나 이렇게하면 컨트롤러에 충돌하지 않고 클라이언트 측에서 완전히 발생합니다. 현재, 나는 자바 스크립트에서 부분적으로 동일한 HTML과 동일한 큰 문자열을 가진 변수를 가지고있다. 하지만 erb 부분과 자바 스크립트 문자열을 별도로 편집하고 유지해야합니다.

이것은 모든 종류의 추악하고 전혀 DRY가 아니므로 처음에 컨트롤러를 누르지 않아도 새 광고 항목을 추가하기 위해 erb 부분에있는 HTML을 활용할 수있는 방법이 있습니까? 또는 재사용 가능한 HTML 블록을 추가로 처리하는 클라이언트 측 방식이 더 좋습니까?

또한 어떤 시점에서 사용자가 모든 광고 항목을 삭제할 수 있으므로 복제가 옵션이 아닙니다. 나는 DOM 어딘가에 숨겨진 부분을 남기고 erb 부분을 통해 렌더링 할 수 있다고 생각합니다. 그러나 그것은 또한별로 좋지 않습니다.

Answer 1

당신은 그것을 같은 것을 할 수있는 :

• 가 (당신이 목록을 찢는 때 렌더링) 당신의 line_item 목록의 끝에 새 양식을 추가하려면 CSS에서 display: none를 통해 숨겨진
• 을 add 버튼 (또는 무엇이든)을 클릭하고 새 양식을 표시 한 다음 add 버튼을 숨 깁니다. 양식의 경우 사용자가 양식을 채운 후 submit (또는 양식을 제출)을 클릭 한 다음 create ajax 호출을 서버에 보내면 slideDown() 함수
• 을 사용하고 싶습니다. 컨트롤러에서 _line_item.html.erb
• .on 'ajax:success' 렌더링 (즉, 귀하의 보트를 수레 경우 어쩌면, 정렬) 목록에 line_item HTML을 추가, (나는 slideUp()를 사용하여 위의 유사) 새 양식을 다시 숨기 다시 표시하여 add 단추.

Answer 2

대부분의 구현과 다소 비슷합니다.

Some implementations은 태그와 비슷한 <script type="text/html">에 HTML을 저장합니다. 이는 거대한 HTML 문자열을 유지하는 것보다 템플릿을 업데이트하는 데 조금 어려울 수 있습니다.