Welche Regeln beachtet HTML beim Erstellen von Parametern?

Question

Ich verwende Rails, um automatisch untergeordnete Objekte basierend auf einem komplexen Satz verschachtelter Attribute zu erstellen. Daher müssen die Parameter auf sehr spezielle Weise verschachtelt werden. Natürlich erkenne ich, dass ich sie mit JS konstruieren kann, aber ich möchte, dass die Reihenfolge des Formulars automatisch bei der Konstruktion hilft. Für den Kontext habe ich 2 Spalten, vertreten durch 2 <td> s. Jede Spalte kann entweder einen neuen Datensatz erstellen oder einen vorhandenen Datensatz bearbeiten. Wenn ein vorhandener Datensatz geändert werden soll, muss natürlich die ID des Datensatzes übergeben werden.

Das gerenderte HTML ist wie folgt:

<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> 

In diesem Fall ist die erste <td> einen vorhandenen Datensatz mit ID 1 wird modifiziert, während die zweite <td> die Parameter die Bereitstellung eines neuen Datensatzes zu schaffen. Wenn ein neuer Datensatz erstellt wird, wird auch das Kind charged_amounts erstellt. So, das sind die Parameter würde ich erwarten:

"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"} 
] 

Stattdessen ich die unten bekommen:

"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"} 
] 

Irgendwie die <td> Grenze nicht funktioniert und das Kind charged_amount Attribute haben irgendwie in einen Topf geworfen worden in die erste <td> bestehende Datensatzänderung.

Danke!

Answer 1

Es ist nicht <td> oder ähnliches HTML-Element, das eine „Grenze“ für die Eingänge macht, es ist die <form> element nur. Alle Eingaben innerhalb eines <form> Tags werden vom Browser als Parameter beim Absenden des Formulars gesendet. Sie haben wahrscheinlich beide Spalten in einem <form> und deshalb sind die Parameter aus beiden Spalten im params miteinander vermischt.

Answer 2

Ich bin nicht sicher, dass es einen Weg, um es speziell zu tun ist, wie Sie wollen, aber Sie können params wie folgt aussehen:

"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"} 
] 

Sie können es erreichen, indem zusätzliche versteckte Eingang Hinzufügen hier zu wiederholen 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> 

Rails hat eine Regel dieses für die Handhabung: es nimmt aus den Attribute in der Abfragezeichenfolgeflag links nach rechts (oder oben in Ihrem HTML nach unten), und erzeugt jedes Mal ein neues Objekt, das es ein wiederholtes Attribut sieht.

Answer 3

Die einzige Möglichkeit, mit der Sie beide Parameter in einer Form erhalten können, aber verschachtelt anders ist, dass, wenn Sie eine ID für das neue Eingabefeld angeben. Das unterscheidet die Elemente des type_logistics_attributes Arrays.

Ich hatte eine ähnliche Notwendigkeit und ich verwendete ryanb's nested form. Wenn ich es für den gleichen Zweck benutze, wie es ist, was es tut, liefert es eine zufällige ID an das neue Eingabefeld. So ist es differenziert.

Hoffen, das führt Sie in die richtige Richtung.