流星 - 單選按鈕組多個記錄中只有一個選擇

Question

我所擁有的是流星應用程序，它使用表來顯示來自我的對象的信息。我正在使用空格鍵{{#each}}來遍歷對象並顯示錶格行。除了顯示單選按鈕之外，這一切都很好。似乎認爲他們都是一個大集團的一部分，只允許選擇一個，而不是每個表中的一個。

我已經嘗試了幾個不同的東西，但無濟於事每行都是獨立的。

有關如何使用模板中的{{#each}}處理流星中的單選按鈕的任何想法。問題如下圖所示。

<td> 
         <input class="form-control box-size clearForm" type="text" name="orderChargeDescription" placeholder="Charges" /> 
        </td> 
        <td> 
         <input type="radio" name="orderWaChargeAddSub" value="ADD" checked>C 
         <input type="radio" name="orderWaChargeAddSub" value="SUB">U 
        </td> 
        <td> 
         <button type="submit" name="orderDispUp" class="btn btn-warning button-height-lp"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button> 
         <button type="submit" name="orderDispDn" class="btn btn-danger button-height-lp"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> 
        </td> 

Answer 1

您可以創建模板的js文件一個幫手檢查，如果當前值與單選按鈕數組的當前元素等於和檢查：

Template.hello.helpers({ 
    isChecked: function(currentValue, value) { 
     return currentValue === value ? 'checked' : ''; 
    } 
}); 

且模板中，你可以使用支票助手與否的單選按鈕：

<template name="hello"> 
    <td> 
    {{#each exampleData}} 
     <input {{isChecked exampleDataItem this}} value="{{this}}" name="orderWaChargeAddSub{{this}}" type="radio"> 
    {{/each}} 
    </td> 
</template> 

您遇到的問題是您使用相同的名稱來分組單選按鈕，您必須爲每組單選按鈕使用不同的名稱。例如：

<tr> 
       <td> 
        <input class="form-control box-size clearForm" type="text" name="orderChargeDescription" placeholder="Charges" /> 
       </td> 
       <td> 
        <input type="radio" name="group1" value="ADD" checked>C 
        <input type="radio" name="group1" value="SUB">U 
       </td> 
       <td> 
        <button type="submit" name="orderDispUp" class="btn btn-warning button-height-lp"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button> 
        <button type="submit" name="orderDispDn" class="btn btn-danger button-height-lp"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <input class="form-control box-size clearForm" type="text" name="orderChargeDescription" placeholder="Charges" /> 
       </td> 
       <td> 
        <input type="radio" name="group2" value="ADD" checked>C 
        <input type="radio" name="group2" value="SUB">U 
       </td> 
       <td> 
        <button type="submit" name="orderDispUp" class="btn btn-warning button-height-lp"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button> 
        <button type="submit" name="orderDispDn" class="btn btn-danger button-height-lp"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> 
       </td> 
      </tr>