2015-01-02 5 views
2

저는 Ryan Bates와 비슷한 질의 응답 응용 프로그램과 함께 레일에 중첩 모델 양식을 사용하고 있습니다. 여기에 http://railscasts.com/episodes/196-nested-model-form-revised.정렬 할 수있는 저장 위치

이제는 질문을 정렬 가능하게 만들고 show.html.erb에 표시하려고 할 때 위치를 저장하려고합니다.

_form.html.erb :

<%= f.fields_for :questions do |builder| %> 
    <ul class='sortable'> 
    <%= render 'question_fields', f: builder %> 
    </ul> 
<% end %> 
<%= link_to_add_fields "Add Question", f, :questions %> 

_question_fields.html.erb :

<li> 
    <%= f.label :content, "Question" %><br /> 
    <%= f.text_area :content %><br /> 
    <%= f.check_box :_destroy %> 
    <%= f.label :_destroy, "Remove Question" %> 
</li> 

내 JQuery와 그냥 간단하다 :

그래서 내 견해는 다음과 같다

$(".sortable").sortable(); 

도우미 :

def link_to_add_fields(name, f, association) 
    new_object = f.object.send(association).klass.new 
    id = new_object.object_id 
    fields = f.fields_for(association, new_object, child_index: id) do |builder| 
    render(association.to_s.singularize + "_fields", f: builder) 
    end 
    link_to(name, '#', class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")}) 
end 

나는 (정렬 가능한의 serialize() 사용) Ajax를 통해 절약에 대해 유사한 SO 질문을 찾았지만 해결책은 AJAX를 사용하지 않고도 저장하는 나는 정말 찾고 있어요.

+0

렌더링되는 html은 무엇입니까 – Rooster

+0

@Rooster, 질문에 발생한 오류를 추가했습니다. 이게 네가 말하는거야? –

+0

@the_ 브라우저에 반환 된 html 코드를 붙여 넣을 수 있습니까? (페이지 표시기 html) – MrMins

답변

3

좋아, 당신이 질문에 대한 필드를 렌더링 할 때주의 할 수 있도록 그 중 하나

  • 이미
  • link_to_add_fields 방법을 통해 새로운 객체 으로 추가됩니다 questions 컬렉션 존재

각 질문 양식 작성 도구는 질문 번호 ID 또는 object_id wly (그러나 저장되지 않은) question 객체를 생성했습니다. 즉, 특정 질문에 대해 추가하는 각 필드는 전용 해시 내에 중첩되어 있으므로 동일한 질문에 대해 동일한 이름의 입력에 대해 서로 다른 값을 연결할 수 있습니다.

그래서 당신은 이미 각 질문에 관련된 몇 가지 값을 가지고 ... 당신이 무엇을해야하는지, 질문의 위치를 ​​저장합니다 question_fields에 숨겨진 입력 필드를 추가 할 수 있습니다 : 당신의 자바 스크립트 코드에서

f.hidden_field :position, class: 'question-position' 

을, 정렬 가능한 목록 내의 각 질문의 위치를 ​​고안하는 함수를 작성하십시오. 여기가 (이 코드를 테스트하지 않았습니다하지만 난 그것을 작동한다고 생각)과 같이 할 수있는 작업은 다음과 같습니다

function refreshPositions() 
{ 
    $('.question-position').each(function() { 
     var idx = $(this).closest('li').index(); 
     $(this).val(idx); 
    }); 
} 

이 클래스 question-position 모든 숨겨진 입력을 통해 반복 것이라고 정렬 목록 내에서 부모 <li>의 위치를 ​​찾을 수 숨겨진 필드 값에 위치를 지정하십시오. 이렇게하면 각 질문과 관련된 순위 값이 생깁니다.우리가 어떤 인수가 refreshPositions에게 주어진 기대하지 않는 한이 유효 (

$(".sortable").sortable({ 
    create: refreshPositions, 
    update: refreshPositions 
}); 

:

사용 jQueryUI 정렬 이벤트 createupdate이 기능은 각 질문의 위치에 대한 최신 값을 유지하기 위해 그렇지 않으면 당신은 당신이 양식을 제출하면 당신은 지금 position 필드 레일즈 앱에서 질문을 받게됩니다,

가이 설정을 감안할 때) 각 처리기에 대한 익명 함수를 사용하고 거기에서 refreshPositions를 호출해야 거라고 당신이 할 수있는 0123에 저장하십시오.모델을 사용하고 나중에 질문을하기 위해 사용합니다.