매개 변수를 만들 때 HTML이 따르는 규칙은 무엇입니까?

Question

레일즈를 사용하여 복잡한 중첩 된 속성 집합을 기반으로 자식 객체를 자동으로 생성합니다. 따라서 매우 특별한 방법으로 매개 변수를 중첩해야합니다. 분명히 나는 ​​그들이 JS를 가지고 싶어하지만 내가 구조를 만들 수 있다는 것을 알았지 만, 폼의 순서가 자동으로 구조를 돕고 싶다. 컨텍스트의 경우 2 개의 열이 있으며 2 <td>으로 표시됩니다. 각 열은 새 레코드를 만들거나 기존 레코드를 편집 할 수 있습니다. 물론 기존 레코드가 수정 될 때 레코드의 ID가 전달되어야합니다. 다음

렌더링 된 HTML은 : 상기 제 <td> 새로운 레코드를 생성하기 위해 파라미터를 제공하는 동안이 경우

<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="delivery" data-instructions="test instructions" data-id="1" data-amount="20"> 
    <span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="delivery"> 
    <input class="labeler-response" name="type_logistics_attributes[][id]" type="hidden" value="1"> 
    <input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" value="test instructions"> 
    </span> 
</td> 

<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="pickup" data-instructions="" data-id="" data-amount="0"> 
    <span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="pickup" data-actioned="charged"> 
    <input type="hidden" name="type_logistics_attributes[][type_of_logistics]" value="pickup"> 
    <input class="injected-amount-input" type="number" min="0" max="" placeholder="Amount" name="type_logistics_attributes[][charged_amounts_attributes][][amount]" value="20"> 
    <span class="area-to-inject-type-of-amount"> 
     <input type="hidden" name="type_logistics_attributes[][charged_amounts_attributes][][type_of_amount]" value="logistics"> 
    </span> 
    <input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" placeholder="Enter address and instructions"> 
    </span>      
</td> 

는, 제 <td>는, (1)의 ID를 갖는 기존의 기록을 변경한다. 새 레코드가 생성되면 자식 charged_amounts도 생성됩니다. 따라서, 이러한 매개 변수 내가 기대됩니다

"type_logistics_attributes"=>[ 
    {"id"=>"1", "instructions"=>"test instructions"}, 
    {"type_of_logistics"=>"pickup", "charged_amounts_attributes"=>[{"amount"=>"40", "type_of_amount"=>"logistics"}], "instructions" => "123 Fake street"} 
] 

대신에, 나는 아래에 무엇입니까 :

"type_logistics_attributes"=>[ 
    {"id"=>"1", "type_of_logistics"=>"pickup", "instructions"=>"test instructions", "charged_amounts_attributes"=>[{"amount"=>"40", "type_of_amount"=>"logistics"}]}, 
    {"instructions"=>"123 Fake street"} 
] 

어떻게 든 <td> 경계가 작동하지 않습니다와 아이 charged_amount 속성은 어떻게 든 집중되었다 먼저 <td> 기존 레코드 수정.

감사합니다.

Answer 1

그것은 <td>하지 않거나 입력에 대한 "경계"를 만드는 유사한 HTML 요소, 그것은 단지 <form> element입니다. <form> 태그 내에있는 모든 입력은 양식을 제출할 때 매개 변수로 브라우저에서 전송됩니다. 당신은 아마도 하나의 <form>에 두 개의 열을 가지고 있으며, 그 이유는 두 열의 매개 변수가 params에 혼합되어있는 이유입니다.

Answer 2

난 당신이 원하는대로 구체적으로 할 수있는 방법이 있다는 것을 확실하지 않다,하지만 당신은 PARAMS는 다음과 같이 할 수 있습니다 :

는

"type_logistics_attributes"=>[ 
    {"id"=>"1", "instructions"=>"test instructions"}, 
    {"id"=>"1", "type_of_logistics"=>"pickup", "charged_amounts_attributes"=>[{"amount"=>"40", "type_of_amount"=>"logistics"}], "instructions" => "123 Fake street"} 
] 

당신은 여기에 추가로 숨겨진 입력 반복 ID를 추가하여 달성 할 수 :

<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="pickup" data-instructions="" data-id="" data-amount="0"> 
    <span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="pickup" data-actioned="charged"> 
    <input name="type_logistics_attributes[][id]" type="hidden" value="1"> 
    <input type="hidden" name="type_logistics_attributes[][type_of_logistics]" value="pickup"> 
    <input class="injected-amount-input" type="number" min="0" max="" placeholder="Amount" name="type_logistics_attributes[][charged_amounts_attributes][][amount]" value="20"> 
    <span class="area-to-inject-type-of-amount"> 
     <input type="hidden" name="type_logistics_attributes[][charged_amounts_attributes][][type_of_amount]" value="logistics"> 
    </span> 
    <input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" placeholder="Enter address and instructions"> 
    </span>      
</td> 

레일이를 처리하기위한 규칙이 : 그것은 (당신의 HTML의 하단 또는 상단) 쿼리 문자열의 왼쪽에서 오른쪽으로 특성을 취하고, 새로운 객체에게이 반복되는 속성을 볼 때마다 만듭니다.

Answer 3

하나의 양식에서 두 매개 변수를 모두 가져올 수 있지만 다르게 중첩 된 유일한 방법은 새 입력 필드에 일부 ID를 제공하는 경우입니다. 이것이 배열 type_logistics_attributes의 요소를 구분합니다.

나는 비슷한 필요성이 있었고 ryanb's nested form을 사용했습니다. 당신과 같은 목적으로 사용할 때, 새로운 입력 필드에 임의의 ID를 제공합니다. 이것이 차별화되는 방식입니다.

희망이 있으면 올바른 방향으로 안내 할 수 있습니다.