응용 프로그램 레이아웃보기 페이지에 자바 스크립트 추가

Question

현재 페이지와 관련된 링크 버튼을 강조 표시해야합니다.

apps/views/layouts/application.html.erb에 :

<ul class="nav nav-tabs"> 
    <li class="link_style"><a href="/">link1</a></li> 
    <li class="link_style"><a href="/about">link2</a></li> 
    <li class="link_style"><a href="/posts">link3</a></li> 
</ul> 

와 나는 나는 이것이 잘 작동 생각하는 일부 .js 파일

$('li.link_style').on('click', function(){ 
    $(this).addClass('active'); // and then add active class for clicked element. 
});​ 

에 다음을 추가 할 계획입니다. 그러나, 어떤 .js 파일에 js 코드를 추가해야하는지 확실하지 않습니다. 내 생각 엔 /app/views/layouts/application.js.erb 내 접근 방식이 맞습니까?

Answer 1

Rails 3.1 이상의 응용 프로그램에 기본 설정을 사용하는 경우 .js 파일의 app/assets/javascripts에 배치 할 수 있습니다. 링크를 클릭하면 페이지 (그리고 JS)가 다시로드되기 때문에,하지만 작동하지 않습니다 Rails Asset Pipeline Guide

Answer 2

에

$('li.link_style').on('click', function(){ 
    $(this).addClass('active'); // and then add active class for clicked element. 
});​ 

의 사용을 section on asset organization을 확인하시기 바랍니다.

이

$(document).ready(function() { 
    $(".nav li.link_style").each(function(){ 
    var link = $(this).find($(a)); 
    if(window.location.pathname == link.attr("href")){ 
     link.addClass("active"); 
    } 
    }); 
}); 

순자산 가치 (NAV) 클래스에 리 모든 요소를 ​​다음 링크의 HREF 현재 페이지의 경로를 비교를 통해이 의지 루프는 경우 클래스가 활성 추가 : 더 유용 뭔가는 다음과 같이 될 수있다 그들은 일치한다. JS 파일의 $ (document) .ready (function() {} 섹션에 이런 내용을 넣어야합니다. JS 파일을 추가 할 때 자산 파일 파이프 라인 (Rails 3.1 +) 또는 귀하의 application.js라고 말한 것입니다.