2012-06-28 8 views
3

저는 지금 당장 레일즈에서 작업 해 왔습니다. 나는 물건을 알아 냈다. 그러나 나는 이것으로 고투하고있다. 나는 그들의 제목으로 렌더링 된 블로그 게시물의 배열을 가지고있다. 컨트롤러에서 개체가 단순히 보이는 좋아 : 내 메인 페이지에서레일즈 객체를 자바 스크립트에 전달하기

@articles 

가 나는 부분 및 디스플레이 단지 제목을 통해 렌더링.

<%= render 'shared/article_view', :collection => @articles %> 

이렇게하면 메인 페이지에 기사 목록이 표시됩니다. 제목을 클릭하면 별도의 div으로 열어보고 싶습니다. 나는 이것을 형식으로 작업한다. 그러나, 나는 호출되는 자바 스크립트에 매개 변수를 전달하는 방법을 잘 모르겠습니다. 나는 내 view_article.js.erb 파일로 id를 통과 할 수 있고 거기에서 그러나

@article = Article.find_by_id(id) 

다음

<p><%= @article.text %></p> 

를 호출 할 수 있으리라 믿고있어, 나는 어떻게이 파일에 매개 변수의 어떤 종류를 통과하는 아무 생각이 없다 . 그것은 작동하지 않을 수도 있으며, 나는 이것을 잘못했을 수도 있습니다. 내가 말했듯이, 여전히 배우기. 어쨌든 도움 주셔서 감사합니다!

+0

나는 당신이 요구하는 것을 얻을 생각이있는 경우 커피

$('document').ready -> $('.article').live 'click', -> $.ajax url: 'articles/' + $(this).attr('id') #getting article#show with id of article complete: (data) -> article = JSON.parse(data.responseText) $('p').empty() $('p').append(article.text) 

이 같은 뭔가 gmail.com에서 antiqe 나에게 이메일을 보내. 기사 id가 들어있는 title 요소에'data-id' attr을 설정할 수 있습니다. JS에서는 클릭 이벤트를 제목 els에 바인딩하고 ID를 추출한 다음 기사 끝점에 대한 ajax 요청을 작성하고 div에 렌더링 할 json을 반환합니다. 내가 바른 길에 있다면 알려줘. –

+0

맞아. 그 문제는 한 번에 여러 기사를 표시하고 있으며 모두 입니다. 한 클래스에 데이터 ID를 설정할 수 있습니까? 필자는 이전에 Rails가 아닌 article_view (id)를 트리거하는 클릭 리스너를 설정 한 다음 AJAX를 사용하여 관련 데이터를 가져와이를 수행했습니다. 나는 이것이 레일즈에서 가능해야만한다고 느낀다 ... – NSchulze

+0

명확하지 않은 것을 유감스럽게 생각한다. 'data-id '는 사용자가 임의의 요소에 설정할 수있는 사용자 정의 HTML 속성입니다. 자세한 정보 [여기] (http://ejohn.org/blog/html-5-data-attributes/). 본질적으로 당신은 클래스'article'을 가진 요소에 이벤트를 바인딩 한 다음 jQuery를 사용하여 속성으로부터 id를 추측합니다. –

답변

3

내 구문은 조금 떨어져 수 있지만 여기에 내가 그것에 대해 갈 것입니다 방법은 있습니다 :이 방법 JS는 것 설명 할 수

HTML

<div data-id="<%= @article.id %>" class="article"><%= @article.title %></div> 

JS

을 일 : http://guides.rubyonrails.org/asset_pipeline.html. 보통 내가하는 일은 특정 뷰에 대한 모든 바인딩 (및 다른 메소드)을 포함하는 객체를 만드는 것입니다. 그런 다음보기의 맨 아래 어딘가에 문서 준비 블록에 개체의 인스턴스를 만들고 DOM을 바인딩합니다. 모든 j는 레이아웃에 포함시킬 때마다 매니페스트 파일 (application.js)에 의해 추가됩니다.

응용 프로그램/자산/자바 스크립트/users.js

// Wraps your binding in a document ready function 
// Runs as soon as the DOM is loaded 
$(function() { 
    $('.article').on('click', function() { 
    var id = $(this).attr('data-id'); 
    $.get('articles/' + id, function(data) { 
     // Handle the result 
     $('.article-window').html(data); 
    }); 
    }); 
}); 

응용 프로그램/자산/자바 스크립트는/

// This directive will include all your js files in the javascripts folder 
    //= jquery 
    //= require_tree . 

응용 프로그램/뷰/레이아웃/application.html를 application.js .erb (또는 귀하의 레이아웃이 어디에 있든)

// This adds all your js to the page 
    <%= javascript_include_tag "application" %> 

레일 컨트롤러

class ArticlesController < ApplicationController 
    respond_to :html, :json 
    def show 
    @article = Article.find(params[:id] 
    respond_with do |format| 
     format.json { render :json => @article } 
    end 
    end 
end 
+0

이것은 의미가 있습니다. 내가 정말로 확신 할 수없는 유일한 것은 JS와 Rails 컨트롤러에 대한 것들을 둘 다 어디에 넣어야하는지이다. – NSchulze

+0

누구든지이 답변을 개선 할 수 있다면 언제든지 수정 사항을 보내주십시오. –

+0

이것이 바보 같은 질문이라면 죄송합니다. 현재,'show'는 javascript가 작동 할 유일한 장소입니까? – NSchulze

0
class ArticleController 

def show 
    @article = Article.find(params[:id] 
    respond_to do |format| 
    format.json {render :json => @article.text } #now when u try to get host/articles.json/[id of article] you will get json with article object 
    end 
end 

article.js.erb에서 (내 예제에서 커피) 당신은 http://js2coffee.org/ article.js를 사용하여 JS로 커피를 변환 할 수 있습니다.당신이 오류

+0

ArticleController의 코드를 다른 컨트롤러, 여전히 article.js.erb에있는 파일을 호출할까요? – NSchulze

+0

@antiqe는 단지 머리를 위로하고,'live()'는 [1.7] (http://api.jquery.com/live/)에서'on()'을 사용하는 것이 더 이상 사용되지 않습니다. –

관련 문제