4

이제 레일즈 3으로 업그레이드 했으므로 자바 스크립트를 분리하고 재사용하는 적절한 방법을 찾아 내려고합니다. 여기에 내가 다루고있어 시나리오는 다음과 같습니다 드래그해야 요소와 하나 droppables와 다른 :레일 3 : js.erb 파일에서 자바 스크립트 함수를 호출하는 방법


나는 두 영역이있는 페이지가 있습니다.

페이지로드시 draggables 및 droppables를 설정하기 위해 jQuery를 사용합니다. 현재 저는 application.html.erb의 머리 부분에 스크립트가 있습니다.이 스크립트는 적절한 해결책은 아니지만 적어도 작동합니다.

페이지의 버튼을 누르면 draggables를 드래그 가능해야하는 새로운 요소 세트로 대체하는 컨트롤러에 ajax 호출이 이루어집니다. 올바른 위치에 부분을 렌더링하는 js.erb 파일이 있습니다. 렌더링 후에는 새로운 요소를 드래그 할 수있게 만들 필요가 있으므로 현재 application.html.erb에있는 코드를 재사용하고 싶습니다. 그러나 올바른 방법을 찾지 못했습니다. js.erb 파일 (yuck)에 코드를 직접 붙여 넣기 만하면 새 요소를 드래그 할 수있게 만들 수 있습니다.

내가 갖고 싶은 것 : - application.html.erb에서 또는 js.erb 파일

에서 두 함수를 호출하는 방법 - 기능의 prepdraggables()와 prepdroppables() 를 포함하는 자바 스크립트 파일을

나는 content_for를 사용하여 코드를 저장하고 재사용하려했지만 올바르게 작동하지 않는 것처럼 보였다.


나는 현재 방금 drag_drop_prep의 코드를 삽입 할 수 없습니다 application.html.erb의 머리 부분

<% content_for :drag_drop_prep do %> 
    <script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 

    // declare all DOM elements with class draggable to be draggable 
    $(".draggable").draggable({ revert : 'invalid' }); 

    // declare all DOM elements with class legal to be droppable 
    $(".legal").droppable({ 
    hoverClass : 'legal_hover', 
    drop : function(event, ui) { 

     var c = new Object(); 
     c['die'] = ui.draggable.attr("id"); 
     c['cell'] = $(this).attr("id"); 
     c['authenticity_token'] = encodeURIComponent(window._token); 

     $.ajax({ 
     type: "POST", 
     url: "/placeDie", 
     data: c, 
     timeout: 5000 
     }); 

    }}); 
}); 
</script> 
<% end %> 

$("#board").html("<%= escape_javascript(render :partial => 'shared/board', :locals => { :playable => true, :restartable => !session[:challenge]}) %>") 
// This is where I want to prepare draggables. 
<%= javascript_include_tag "customdragdrop.js" %> // assuming this file had the draggables code from above in a prepdraggables() function 
prepdraggables(); 

답변

3

undo.js.erb에 무엇을 가지고 함수에 넣은 다음 application.html.erb 및 각 부분에서 함수를 호출합니다. 내가 오해 한 것 같아. 내가하고 결국 무엇을 기본적이다

prepdraggables(); 
+0

:

function prepdraggables(){ // declare all DOM elements with class draggable to be draggable $(".draggable").draggable({ revert : 'invalid' }); // declare all DOM elements with class legal to be droppable $(".legal").droppable({ hoverClass : 'legal_hover', drop : function(event, ui) { var c = new Object(); c['die'] = ui.draggable.attr("id"); c['cell'] = $(this).attr("id"); c['authenticity_token'] = encodeURIComponent(window._token); $.ajax({ type: "POST", url: "/placeDie", data: c, timeout: 5000 }); }}); } 

그리고 application.html.erb 및 undo.js.erb에

. 드래그 앤 드롭 기능이 필요한 파일에 $ (document) .ready (prep_drag_drop)를 넣습니다. –