Ja/Nein-Taste

Question

Ich benutze Autoform, um ein Ja, keine Frage zu stellen, und ich möchte zwei Tasten haben, eine, die ja sagt, die andere sagt nein. Unter Verwendung aldeed:autoform-bs-button-group-input kann ich zwei Knöpfe erzeugen, die den Code unten in meinem Schema verwenden, aber das gibt nicht die Fähigkeit, jeden Knopf einzeln zu stylen. Zum Beispiel möchte ich, dass einer grün und einer rot ist. Wie kann ich das machen?

Pfad: Schema.js

answer: { 
     type: String, 
     optional: true, 
     allowedValues: ['Yes', 'No'], 
     autoform: { 
       type: "select-radio", 
       options: function() { 
       return [ 
       {label: "Yes", value: 'Yes'}, 
       {label: "No", value: 'No'}, 
       ]; 
      } 
     } 
    } 

Pfad: template.js

{{#autoForm collection="questions" id=makeUniqueID doc=this type="update" autosave=true}}  
{{> afQuickField name="answer" type="select-radio" template="buttonGroup" label=false}} 
{{/autoForm}} 

Answer 1

Zuerst müssen wir eine Klasse Attribut Autoform hinzuzufügen:

{{#autoForm class="YesNoStyles" collection="questions" id=makeUniqueID doc=this type="update" autosave=true }}  
{{> afQuickField name="answer" type="select-radio" template="buttonGroup" label=false}} 
{{/autoForm}} 

Diese auf die erzeugte <form> Tag übergeben wird, die wir kann inspizieren und sehen wie es aussieht:

<form class="YesNoStyles" id="makeUniqueID" novalidate="novalidate"> 
    <div class="form-group"> 
    <div class="af-radio-group" data-schema-key="answer"> 
     <div> 
     <label> 
      <input type="radio" value="Yes" name="answer" id="6gWEaAr2ZWQzqtj7H"> Yes</label> 
     </div> 
     <div> 
     <label> 
      <input type="radio" value="No" name="answer" id="6gWEaAr2ZWQzqtj7H"> No</label> 
     </div> 
    </div> 
    <span class="help-block"></span> 
    </div> 
</form> 

Jetzt gibt es zwei Möglichkeiten:

1. Die input[value="Yes"] und input[value="No"] Elemente, dann CSS-Elemente, um ihre Eltern gelten. Dies kann jedoch nicht nur mit CSS getan werden, da CSS-Selektoren die Auswahl von Elternelementen nicht erlauben. Meteor onRendered Rückruf ermöglicht es uns, wie folgt vorgehen:

   Template.Question.onRendered(function(){ 
       $('input[value="Yes"]')[0].parentElement.classList.add('yes'); 
       $('input[value="No"]')[0].parentElement.classList.add('no'); 
   }); 
   

   mit den folgenden definierten CSS-Klassen:

   .yes { 
       background-color: green; 
   } 
   
   .no { 
       background-color: red 
   } 
   

2. :nth-child(i) CSS-Selektor, kein Javascript erforderlich!

   Definieren Sie die folgenden CSS-Regeln (mit der Klasse beginnen die ich oben hinzugefügt):

   .YesNoStyles > div > div > div:nth-child(1) > label { 
       background-color: green; 
   } 
   
   .YesNoStyles > div > div > div:nth-child(2) > label { 
       background-color: red; 
   }