Come eseguire il rendering di una matrice come un elenco di tasti di scelta?

Vorrei loop attraverso una matrice che posso definire in Javascript e rendering di un elenco di pulsanti di opzione. Il mio codice che non funziona attualmente, ed è come segue (anche su jsfiddle):

<div data-bind="foreach: options" >
    <div>
        <input type="radio" name="optionsGroup" data-bind="checked: selected" />
        <span data-bind="text: label"></span>
     </div>    
</div>
var optionsList = [
    {"value": "a","label": "apple"},
    {"value": "b","label": "banana"},
    {"value": "c","label": "carrot"}
];
function viewModel() {
    var self = this;
    self.options = optionsList;
    self.selected = ko.observable("a");
    self.selected.subscribe(function(newValue) {
        alert("new value is " + newValue);
    });
}
ko.applyBindings(new viewModel());

Se il mio array è parte di html quindi funziona bene, vedi questo (o jsfiddle):

<div>
    <input type="radio" name="optionsGroup" value="a" data-bind="checked: selected"     />Apple
</div>
<div>
    <input type="radio" name="optionsGroup" value="b" data-bind="checked: selected" />Banana
</div>
<div>
     <input type="radio" name="optionsGroup" value="c" data-bind="checked: selected" />Carrot
</div>
<div data-bind="text: selected">
</div>
function viewModel() {
    var self = this;
    self.selected = ko.observable("a");
    self.selected.subscribe(function(newValue) {
        alert("new value is " + newValue);
    });
}    
ko.applyBindings(new viewModel());

Ho ottenuto questo lavoro generando il tutto il codice html all’interno di javascript e di lavoro, utilizzando le caselle di controllo, ma sono perplesso la generazione di un gruppo di pulsanti di opzione utilizzando il foreach iteratore.

Qualcuno ha ottenuto un esempio come il mio primo lavoro?

  • Sicuramente si può venire con un più titolo informativo.
  • Vale la pena notare che non hai bisogno di var self = this nel viewModel. Eliminare la riga e modificare tutti selfs a this. Ambito di applicazione del bene senza.
InformationsquelleAutor user759608 | 2012-01-19

 

4 Replies
  1. 16

    Ecco un modo per fare questo. Nota che il attr associazione dovrebbe venire prima il checked associazione.

    JS:

    var optionsList = [
        {"value": "a", "label": "apple"},
        {"value": "b", "label": "banana"},
        {"value": "c", "label": "carrot"}
    ];
    
    function viewModel() {
        this.options = optionsList;
        this.selected = ko.observable("a");
    }
    
    ko.applyBindings(new viewModel());

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
    
    <h3>Fruits</h3>
    <div data-bind="foreach: options" >
      <label>
        <input type="radio"
               name="optionsGroup" 
               data-bind="attr: {value: value}, checked: $root.selected" />
        <span data-bind="text: label"></span>
      </label>    
    </div>
    
    <h3>Selected value:</h3>
    <pre data-bind="text: ko.toJSON($root.selected)"></pre>

    • Il mio problema era il attr associazione non viene prima controllato. Ha un senso ma non è evidente da subito.
    • Violino di sopra di risposta in contesto (solo per i calci).
    • In recents Knockout versioni, $root, è diventato padre $
  2. 1

    Il tuo codice mi da questo errore:

    Messaggio: ReferenceError: selezionato non è definito;

    Associazioni di valore: controllato: selezionato

    Definito selected sul modello di visualizzazione livello, ma si fa riferimento all’interno foreach così Knockout.js cerca nelle opzioni di livello.

    Modifica:

    <div><input type="radio" name="optionsGroup" data-bind="checked: selected" />

    a:

    <div><input type="radio" name="optionsGroup" data-bind="checked: $root.selected" />

    $root.selected cerca il selected di proprietà sul modello di visualizzazione livello.

    QUI è il codice modificato.

    Per ulteriori informazioni sulle pseudo-variabili (come $root) vedere 3. L’accesso al padre associazione contesti.

    • Grazie dzejkej. Questo è molto apprezzato. Mi studio il link.
  3. 1

    Per essere in grado di avere l’intero oggetto è meglio utilizzare checkedValue invece di attr: {valore} così :

    Fruits
    <div data-bind="foreach: options" >
        <div><input type="radio" name="optionsGroup" data-bind="checkedValue: $data, checked: $root.selected" />
        <span data-bind="text: label"></span></div>    
    </div>

Lascia un commento