link_to_function을 리팩터링하는 가장 좋은 UJS 방식은 무엇입니까?

Question

나는이 팀 소유자가 선수 순위 일련의 기준을 구축 할 수 있습니다 내 hobby project 중심의 야구 드래프트에 대한 다음과 같은 인터페이스 : 목록에 그 속성을 추가합니다

속성을 클릭을 , 그것에게 중요성 요인 및 종류 방향을주십시오.

에서 레일 2와 레일 3 (프로토 타입 헬퍼와 함께) - 나는함으로써 이런 짓을 다음

<div class="rankingvaluecloud"> 
    <ul> 
     <% @rankingattributes.each do |attributename| %> 
     <li><%= add_ranking_attribute_link(attributename) %></li> 
     <% end %> 
    </ul> 
</div> 
<div id="rankingattributes"> 
</div> 

"add_ranking_attribute_link (AttributeName에이)"인 경우 :

def add_ranking_attribute_link(attributename) 
    link_to_function attributename do |page| 
    page.insert_html :bottom, :rankingattributes, :partial => 'ranking_attribute', :locals => {:attributename => attributename } 
    end 
end 

내가 ' 이 jquery 변환 m,하지만 그것을 수행하는 가장 좋은 방법은 잘 모르겠습니다 - 주로 루프 관련된 때문입니다. 나는 이것을 할 수있다 :

<div class="rankingvaluecloud"> 
    <ul> 
     <% @rankingattributes.each do |attributename| %> 
     <li><%= link_to(attributename,'#',:class => 'attributeappend', :onclick => "$('#rankingattributes').append('#{escape_javascript(render(:partial => 'ranking_attribute',:locals => {:attributename => attributename}))}')") %></li> 
     <% end %> 
    </ul> 
</div> 
<div id="rankingattributes"> 
</div> 

기본적으로 link_to_function을 대체하고있다. 그러나 더 좋은 방법이 있습니까? UJS 방법은 내가 같은 일을 할 것이다 :

$(".attributeappend).click(function() { 
    $('#rankingattributes').append('#{escape_javascript(render(:partial => 'ranking_attribute',:locals => {:attributename => attributename}))}') 
}); 

을하지만 그 때문에 AttributeName을 취급의 루프 외부에서 작동하지 않습니다. 솔직히 erb 및 javascript에서 약간의 손실이 생겨서 - 그리고 eruten과 javascript 구문 오류의 연약한 캐스케이드없이 렌더링 부분에 다시 삽입하기 위해 javascript 함수에 paruten으로 attributename을 전달하는 좋은 방법을 모릅니다. 그 중 디버깅에 실망합니다.

더 좋은 방법이 있어야합니다. (그리고 더 좋은 인터페이스를 제안합니다. 환영합니다!).

link_to 'attributename','#',:class => 'attributeappend' 

을 다음 JS의 일치하는 비트

$(".attributeappend").click(function() { 
    $('#rankingattributes').append($('#template').html().replace(/toReplace/g, $(this).text()); 
    return false; 
}); 

이 당신이 아이디 template있는 페이지에 보이지 않는 요소가 있다고 가정 할 것이다 :

Answer 1

내가보기에이 작업을 수행 할 것 , something like

<div id="template"> 
Attribute: toReplace 
... 

</div> 

링크를 클릭하면 자바 스크립트가 실행됩니다. 템플리트 내에서 html을 가져오고 toReplace의 모든 인스턴스를 링크에서 추출한 텍스트로 바꾼 다음 id가 ranking attributes 인 요소에 추가합니다.

링크의 텍스트가이 방식으로 대체 된 실제 값과 다르기를 원한다면 올바른 값으로 링크에 데이터 속성을 추가 할 수 있습니다.