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로 동일한 작업을 수행하고 사이트의 특정 영역에만 적용하기 위해 비슷한 방식으로 그룹화 할 수 있습니다.

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

1. 미리 컴파일하려면 자바 스크립트를 매니페스트에 넣어야합니다. 그러나 모든 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');
}; 

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

Rails를 훌륭하게 만드는 중요한 기능을 잃어 버리기 때문에 자산 파이프 라인 외부에서 JS 또는 CSS 파일을로드해서는 안됩니다. 그리고 당신은 다른 보석이 필요하지 않습니다. 나는 가능한 한 적은 보석을 사용한다고 생각하며 여기서 보석을 사용할 필요는 없습니다.

원하는 것은 "컨트롤러 특정 Javascript"( "활동 특정 Javascript가 맨 아래에 포함되어 있습니다.)입니다.이를 통해 특정 컨트롤러에 대한 특정 JavaScript 파일을로드 할 수 있습니다. Javascript를보기에 연결하려고하는 것은 일종의 .. 뒤로하고 MVC 디자인 패턴을 따르지 않는 경우 컨트롤러와 컨트롤러 또는 컨트롤러 내부의 작업과 연결하려고합니다.

불행하게도, 어떤 이유로 든 Rails devs는 기본적으로 모든 페이지가 자산 디렉토리에있는 모든 JS 파일을로드 할 것이라고 결정했습니다. 기본적으로 "Controller Specific Javascript"를 활성화하는 대신이 작업을 수행하기로 결정한 이유는 알 수 없습니다. 이 작업은 application.js 파일을 통해 수행되며 기본적으로 다음 코드 줄이 포함됩니다.

//= require_tree .

이것을 지시문이라고 합니다. 이것이 스프라켓이 자산 / javascripts 디렉토리의 모든 JS 파일을로드하기 위해 사용하는 것입니다. 기본적으로 스프로킷은 application.js 및 application.css를 자동으로로드하며 require_tree 지시문은 모든 JS 및 Coffee 파일을 해당 디렉토리에로드합니다.

참고 : 비계를 사용하는 경우 (비계가 아닌 경우 이제 시작하기에 좋은시기입니다) Rails 는 해당 비계의 컨트롤러에 대해 자동으로 커피 파일을 생성합니다 . 커피 파일 대신 표준 JS 파일 을 생성 하려면 Gemfile 에서 기본적으로 활성화 된 커피 보석 을 제거하면 스캐 폴드가 대신 JS 파일을 생성합니다.

"Controller Specific Javascript"를 활성화 하는 첫 번째 단계 는 application.js 파일에서 require_tree 코드를 제거하거나 여전히 전역 JS 파일이 필요한 경우 asset / javascripts 디렉토리 내의 폴더로 변경하는 것입니다. IE :

//= require_tree ./global

2 단계 : config / initializers / assets.rb 파일로 이동하여 다음을 추가하십시오.

%w( controllerone controllertwo controllerthree ).each do |controller|
  Rails.application.config.assets.precompile += ["#{controller}.js", "#{controller}.css"]
end

원하는 컨트롤러 이름을 삽입하십시오.

3 단계 : application.html.erb 파일에서 javascript_include_tag를 다음과 같이 바꿉니다 (params [: controller] 부분 참고 :

<%= javascript_include_tag 'application', params[:controller], 'data-turbolinks-track': 'reload' %>

서버와 비올라를 다시 시작하십시오! 스캐 폴드로 생성 된 JS 파일은 이제 해당 컨트롤러가 호출 될 때만로드됩니다.

컨트롤러의 특정 ACTION에 특정 JS 파일을로드해야 합니까? IE / articles / new ? 대신이 작업을 수행하십시오.

application.html.erb :

<%= javascript_include_tag "#{controller_name}/#{action_name}" if AppName::Application.assets.find_asset("#{controller_name}/#{action_name}") %>

config / initializers / assets.rb :

config.assets.precompile += %w(*/*)

그런 다음 자산 / 자바 스크립트 폴더에서 컨트롤러와 동일한 이름의 새 폴더를 추가하고 내부에 작업과 동일한 이름의 js 파일을 넣으십시오. 그런 다음 해당 특정 작업에로드합니다.

좋아, 아마도 이것은 최악의 작업과 같지만 .js 파일을 렌더링 한 컨트롤러 메소드를 만듭니다.

제어 장치

def get_script
   render :file => 'app/assessts/javascripts/' + params[:name] + '.js'
end
def get_page
   @script = '/' + params[:script_name] + '.js?body=1'
   render page
end

전망

%script{:src => @script, :type => "text/javascript"}

어떤 이유로 든 우리가 이것을하고 싶지 않다면 알려주십시오.

JS를 추가하는 기본 방법은 바닥 글에 있으므로 다음과 같이 할 수 있습니다.

show.html.erb :

<% content_for :footer_js do %>
   This content will show up in the footer section
<% end %>

layouts / application.html.erb

<%= yield :footer_js %>