2013-09-07 2 views
0

이가 다음과 같은 질문 관련이 있지만, 나는 레일에서 기본값으로 비교 대신 자바 스크립트의 커피 스크립트를 사용하고자하는 사용하여 레일에 링크로 테이블 행을 만들기 4.이 커피 스크립트

출발점은 코드 제공 뷰 ERB 코드는 다음 코드를 사용하여 테이블 생성기 포함 Making a table row into a link in Rails

: 이전 질문에 대한 답변에

<% @songs.each do |song| %> 
    <tr data-link="<%= edit_song_path(song) %>"> 
    <td><%= song.Name %></td> 
    <td><%= song.Group %></td> 
    </tr> 
<% end %> 

<tr data-link="<%= edit_song_path(song) %>"> 라인에 주어진 대답을 기반으로 위의 링크 된 질문. 이 마크 베리의 대답에 자바 스크립트에 대한 나의 번역

$("tr[data-link]").click -> 
    window.location = this.dataset.link 

입니다 :

은 내가 songs.js.coffee 파일에서 follwing을 수 있습니다. 나는 또한 window.location = $(this).data("link")과 같은 다른 제안을 시도했다.

페이지가로드되면 테이블 행을 클릭 할 수 없습니다. window.location을 경고로 설정하는 동작을 바꾸면 사용자가 테이블 행을 클릭 할 때가 아니라 페이지가로드 될 때 경고 대화 상자가 표시됩니다.

위 coffeescript 코드는 song.js.coffee 파일의 유일한 코드입니다. 코드를 감쌀 필요가있는 것이 무엇인지 놓치고 있습니까?

부분 답변 : 첫 번째 의견에서 제안한 원래 커피 코드 코드 앞에 $ ->을 추가하면 테이블 행을 한 번만 선택할 수 있습니다. 저는 달러 기호 변수가 jQuery의 별칭이되었다고 생각합니다 (이 예는 Coffeescript의 Little Book의 숙어 장에 있습니다 : http://arcturo.github.io/library/coffeescript/04_idioms.html).

불행하게도, 페이지가로드 된 후 편집 페이지가 표시되도록 하나의 테이블 행을 선택할 수 있지만 사용자가 브라우저에서 뒤로 버튼 또는 페이지로 돌아 가기 링크를 사용하여 페이지로 돌아 오는 경우, 테이블 행을 더 이상 선택할 수 없습니다.

새로운 커피 스크립트 코드는 다음과 같습니다

$ -> 
    $("tr[data-link]").click -> 
    window.location = this.dataset.link 

자바 스크립트에서 올바른 번역은 커피 스크립트하는 위의 코드입니다. 나는 두 스크립팅 언어가 새로 도입되었습니다.

Rails 4에서 coffeescript를 사용하여 클릭 가능한 테이블 행을 만드는 것에 대한 다른 대답이 있습니까?

감사합니다.

답변

0

예, 게시 한 코드가 올바른 번역입니다. "jstocoffe.org"은 좋은 사이트입니다 (일부 버그가보고되었지만). JavaScript를 CoffeeScript로 또는 그 반대로 변환하는 데 사용할 수 있습니다.

@ muistooshort의 권장 사항이 게시 된 후에 게시 한 코드처럼 테이블 행이 "unclickable"이된다고 말하는 이유는 확실하지 않습니다. 이 말을하는 이유는 여기 DOM을 조작하지 않기 때문입니다. 문서가 준비 될 때 data-link 속성을 가진 테이블 행에 클릭 이벤트를 첨부했습니다 (이것은 $ ->입니다). 이것은 뒤로 버튼과 전체 페이지 refresh는 DOM을 다시로드합니다.

동적으로 추가 된 내용 (또는 앞서 언급 한 DOM 조작의 경우)은 DOM 트리에서 상위 또는 상위 요소를 통해 이벤트를 "선택자"에 바인드하기 위해 jQuery on 메소드 (이전 live 메소드 대체)를 사용해야합니다 . jQuery의 "on"메소드를 읽으십시오.이 메소드는이 문제뿐만 아니라 미래의 이벤트 처리에 유용 할 것입니다. 하지만이 문제에 대한

, 다음과 같은 시도 할 수 있습니다 :이 도움이

$ -> 
    $(document).on 'click', 'tr[data-link]', (evt) -> 
    window.location = this.dataset.link 

희망을.