Sinatra 도우미에서 JavaScript 생성

Question

Sinatra 기반 웹 응용 프로그램에서 Haml을 내 템플릿 언어로 사용하고 있으며 데이터베이스 모델의 정보를 기반으로 JavaScript 배열을 생성하는 데 문제가 있습니다. 본질적으로 jQuery-UI Autocomplete 위젯에 사용할 사용자 이름으로 구성된 JavaScript 배열을 생성하려고합니다.

다음 코드를 시도했지만 작동하지 않았습니다. 도우미에서 대신 -

:javascript 
    var names = new Array; 
    - User.all.each do |u| 
    names.push(#{u}) 

읽은 후, 대부분의 사람들은 (''HAML의 접두사 즉, 무엇이든) 루비를 evalutating 포함 아무것도 좋습니다. 그래서, 이것으로, 도우미 방법으로 JavaScript를 생성하는 방법을 누군가 나에게 설명 할 수 있습니까?

Answer 1

여기서 문제는 당신이 (필터 내에 정상 HAML 기능을 사용할 수 없다는 것입니다 예 : :javascript). 그러나 필터의 텍스트는 일반적인 루비 문자열 보간법을 따릅니다. 즉, #{} 내부의 내용은 루비 코드로 실행됩니다.

그래서 작동하도록 예를 얻는 하나 개의 방법이 될 것 같은 뭔가 :

:javascript 
    var names = new Array; 
    #{js = "" 
    User.all.each {|u| js << "names.push(#{u})\n" } 
    js} 

이 그래도 꽤 지저분하고, 그것을 정돈 할 수있는 방법은 도우미로 이동하는 것입니다. 도우미는 렌더링 과정에서 범위 내에있는 메소드이므로 (haml 파일에서 호출 할 수 있으므로) 생성 된 페이지에 포함될 텍스트를 생성합니다.

이 경우에는 자바 스크립트가 생성되지만 자바 스크립트는 텍스트이므로 아무런 문제가 없습니다. 도우미 방법은 다음과 같을 수 있습니다 :

def js_array(name, array) 
    js = "var #{name} = new Array();\n" 
    array.each do |i| 
    js << "#{name}.push(#{i})\n" 
    end 
    js 
end 

(또는 리터럴 자바 스크립트 배열을 만들 수 있습니다 : 당신이 선호하는 경우

def js_array(name, array) 
    js = "var #{name} = [" 
    js << array.collect{|i| "\"#{i}\""}.join(",") 
    js << "]" 
    js 
end 

합니다.)

다음, 여기서이 방법은 이동 하는가? Sinatra에서는 'helpers` method을 사용하여 도우미 메서드를 정의합니다. 이 블록에 정의 된 방법은 귀하의 의견에 사용할 수 있습니다 : 장소에두고

helpers do 
    def js_array(name, array) 
    js = "var #{name} = new Array();\n" 
    array.each do |i| 
     js << "#{name}.push(#{i})\n" 
    end 
    js 
    end 
end 

, 당신은 다음 자바 스크립트 배열을 생성하기 위해 HAML에

:javascript 
    #{js_array("names", User.all)} 

을 할 수 있습니다. 루비 코드가 실행되도록하려면 여전히 #{}이 필요합니다. 이제는 중괄호 사이에 단일 메서드 호출 만 있습니다.:javascript 필터는 <script> 및 <![CDATA[ 태그로 블록을 래핑하고 도우미는 원하는 실제 자바 스크립트를 만듭니다.

한 가지 더 : 귀하의 예제에서 배열은 User.all입니다.이 배열은 activerecord 또는 비슷한 것으로 보입니다.이 경우 문자열 배열은 없지만 결과를 줄 수있는 다른 개체가있을 수 있습니다. 필요. 당신이 뭔가를 할 필요가 있습니다

:javascript 
    #{js_array("names", User.all.collect(&:pretty_name)} 

(pretty_name 인쇄의 이름을 반환 User 객체의 방법이다), 또는 아마도 당신이 사용하고자하는 문자열을 추출하는 도우미 메서드를 변경합니다.

Answer 2

헬퍼 메소드로 자바 스크립트를 생성하는 대신 뷰에서 jQuery UI 자동 완성 위젯의 소스로 사용할 수있는 이름 배열을 반환 할 수 있습니다.

그래서 도우미 방법은 다음과 같이 보일 것입니다 :

helpers do 
    # Return an array of users' names 
    def get_all_names 
    return User.all.map {|u| u.name} 
    end 
end 

그리고 당신의 HAML에 :

:javascript 
    $(function() { 
    var names = #{get_all_names.to_json}; 
    $("#widget").autocomplete({ source: names }); 
    });