[javascript] Rails 3 앱에서 페이지 특정 JavaScript를 추가하는 가장 좋은 방법은?

Rails 3에는 눈에 잘 띄지 않는 JavaScript가 있습니다.

그러나 특정 페이지에 추가 JavaScript를 포함시키는 가장 좋은 방법이 무엇인지 궁금했습니다.

예를 들어, 이전에 수행 한 위치는 다음과 같습니다.

<%= f.radio_button :rating, 'positive', :onclick => "$('some_div').show();" %>

우리는 이제 다음과 같이 방해하지 않게 만들 수 있습니다

<%= f.radio_button :rating, 'positive' %>

# then in some other file
$('user_rating_positive').click(function() {
  $('some_div').show();
}

그래서 내 질문은 JavaScript를 어디에 / 어떻게 포함시켜야하는지 생각합니다. application.js이 JavaScript는이 하나의보기에만 적용되므로 파일 을 채우고 싶지 않습니다 . 어떻게 든 각 페이지에 대한 사용자 정의 JavaScript 파일을 포함시켜야합니까, 아니면 헤더가 찾는 인스턴스 변수에 고정해야합니까?

답변

내가하고 싶은 것은 content_for :head블록 당 뷰당 Javascript를 포함하고 yield응용 프로그램 레이아웃에서 해당 블록을 포함하는 것입니다. 예를 들어

꽤 짧은 경우 :

<% content_for :head do %>
  <script type="text/javascript">
    $(function() {
      $('user_rating_positve').click(function() {
        $('some_div').show();
      }
    });
  </script>
<% end %>

또는 더 긴 경우 :

<% content_for :head do %>
  <script type="text/javascript">
    <%= render :partial => "my_view_javascript"
  </script>
<% end %>

그런 다음 레이아웃 파일에서

<head>
  ...
  <%= yield :head %>
</head>

답변

한 페이지에만 자바 스크립트를 포함하려면 페이지 인라인에 자바 스크립트를 포함시킬 수 있지만 자바 스크립트를 그룹화하고 자산 파이프 라인, 축소 된 js 등을 활용하려는 경우 추가 할 수 있으며 추가 할 수 있습니다 js 자산을 사이트의 특정 컨트롤러 /보기 / 섹션에만 적용되는 그룹으로 분할하여 특정 페이지에만 결합되고로드되는 js 자산.

자산의 js를 각각 별도의 매니페스트 파일과 함께 폴더로 이동하므로 백엔드에서만 사용되는 admin js 라이브러리가있는 경우 다음을 수행 할 수 있습니다.

자산
- 자바 스크립트
  - 관리자
    - … js
  - admin.js (관리자 그룹의 매니페스트)
  - application.js (앱 글로벌 그룹을위한 매니페스트)
  - 글로벌
    - … js

기존 application.js에서

//= require jquery
//= require jquery_ujs
//= require_tree ./global // requires all js files in global folder

새로운 admin.js 매니페스트 파일

//= require_tree ./admin // requires all js files in admin folder

config / production.rb를 편집하여이 새로운 js manifest를로드하십시오.

config.assets.precompile += %w( admin.js )

그런 다음 페이지 레이아웃에 추가 j를 포함시킬 수 있도록 페이지 레이아웃을 조정하십시오.

<%= content_for :header %>

그런 다음이 특정 js 그룹 (및 일반 응용 프로그램 그룹) 및 / 또는 페이지 특정 js, css 등을 포함하려는보기에서 :

<% content_for :header do %>
  <%= javascript_include_tag 'admin' %>
<% end %>

물론 CSS로 동일한 작업을 수행하고 사이트의 특정 영역에만 적용하기 위해 비슷한 방식으로 그룹화 할 수 있습니다.

답변

이 답변은 나에게 도움이되었습니다! 누군가가 조금 더 원한다면 …

미리 컴파일하려면 자바 스크립트를 매니페스트에 넣어야합니다. 그러나 모든 javascript 파일이 필요한 경우 application.js.coffee다른 페이지로 이동할 때마다 모든 javacsripts가로드되고 페이지 별 javascript를 수행하는 목적이 무효화됩니다.

따라서 speciifc.js모든 페이지 별 자바 스크립트 파일이 필요한 고유 한 매니페스트 파일 (예 :)을 만들어야합니다 . 또한, 수정 require_tree에서application.js

app / assets / javascripts / application.js

//= require jquery
//= require jquery_ujs
//= require_tree ./global

app / assets / javascripts / specific.js

//= require_tree ./specific

그런 다음 environments/production.rbconfig 옵션을 사용하여이 매니페스트를 사전 컴파일 된 목록에 추가하십시오.

config.assets.precompile += %w( specific.js )

끝난! 항상로드해야하는 모든 공유 자바 스크립트는 app/assets/javascripts/global폴더에 배치되고 page-spcific 자바 스크립트는에 배치 app/assets/javascripts/specific됩니다. 뷰에서 페이지 별 자바 스크립트를 호출하면됩니다.

<%= javascript_include_tag "specific/whatever.js" %> //.js는 선택 사항입니다.

이것으로 충분하지만 나도 사용하고 싶었다 javascript_include_tag params[:controller]. 컨트롤러를 만들면 app/assets/javascripts언급 된 다른 사람들과 마찬가지로 관련 커피 스크립트 파일이 생성됩니다 . 진정 있습니다 컨트롤러 고유의 사용자가 특정 컨트롤러보기에 도달 할 경우에만로드 자바 스크립트는.

그래서 다른 매니페스트를 만들었습니다. controller-specific.js

app / assets / javascripts / controller-specific.js

//= require_directory .

여기에는 컨트롤러와 관련된 모든 자동 생성 커피 스크립트가 포함됩니다. 또한 미리 컴파일 된 목록에 추가해야합니다.

config.assets.precompile += %w( specific.js controller-specific.js )

답변

나는 다음을 선호합니다 …

application_helper.rb 파일에서

def include_javascript (file)
    s = " <script type=\"text/javascript\">" + render(:file => file) + "</script>"
    content_for(:head, raw(s))
end

그런 다음 특정보기 (이 예에서는 app / views / books / index.html.erb)에서

<% include_javascript 'books/index.js' %>

… 나를 위해 일하는 것 같습니다.

답변

필요한 파이프 라인 특정 자바 스크립트 (공감)를 얻기 위해 자산 파이프 라인이나 복잡한 해결 방법 을 사용하지 않으려는 경우 가장 단순하고 가장 강력한 방법으로 위의 답변과 동일하지만 코드는 적습니다. 사용하다:

<%= javascript_include_tag "my_javascipt_file" %>

참고 : 이것은 사용하는 답변보다 include 태그 당 하나 이상의 http 요청이 필요합니다. content_for :head

답변

pluggable_js gem을 살펴보십시오 . 이 솔루션을보다 쉽게 사용할 수 있습니다.

답변

자산 파이프 라인은 모든 js를 하나의 (최소화 된) 파일로 묶어서 페이지로드 시간을 줄이는 것을 의미합니다. 이것은 표면 상으로 모호한 것처럼 보일 수 있지만 실제로는 C 및 Ruby와 같은 인기있는 언어로 이미 존재하는 기능입니다. “include”태그와 같은 것은 파일의 다중 포함을 방지하고 프로그래머가 코드를 구성하는 데 도움을주기위한 것입니다. C로 프로그램을 작성하고 컴파일 할 때 해당 코드가 모두 실행중인 프로그램의 모든 부분에 존재하지만 해당 코드가 사용될 때 메소드는 메모리에만로드됩니다. 어떤 의미에서, 컴파일 된 프로그램에는 코드가 잘 모듈화되도록 보장하는 것이 포함되지 않습니다. 우리는 그런 식으로 프로그램을 작성하여 코드를 모듈화하고 운영 체제는 주어진 지역에 필요한 객체와 메소드 만 메모리에로드합니다. “방법 별 포함”과 같은 것이 있습니까? Rails 앱이 편안하다면 이것은 본질적으로 당신이 요구하는 것입니다.

페이지에서 HTML 요소의 동작을 향상시키기 위해 자바 스크립트를 작성하는 경우 해당 기능은 설계 상 ‘페이지 별’입니다. 문맥에 관계없이 실행되는 방식으로 작성한 복잡한 코드가있는 경우 어쨌든 해당 코드를 html 요소에 바인딩하는 것을 고려하십시오 ( Garber-Irish 메소드에 설명 된대로 body 태그를 사용할 수 있음 ). 함수가 조건부로 실행되면 성능이 모든 추가 스크립트 태그보다 작을 수 있습니다.

rails apps project에 설명 된대로 paloma gem 을 사용할 생각입니다 . 그런 다음 paloma 콜백에 페이지 별 함수를 포함시켜 자바 스크립트를 페이지별로 만들 수 있습니다.

Paloma.callbacks['users']['new'] = function(params){
    // This will only run after executing users/new action
    alert('Hello New Sexy User');
};

당신은 레일을 사용하므로 보석을 좋아한다는 것을 알고 있습니다 🙂