Ember Aktion verhindert Checkbox Wert von

Question

In meiner Ember-Anwendung möchte ich eine Reihe von Kontrollkästchen dynamisch über eine Schleife rendern und alle nicht ausgewählten Kontrollkästchen deaktivieren, wenn 2 der Checkboxen überprüft wurden.

Ich habe Probleme mit der Einstellung eines Wertes auf 'wahr', wenn ein Kontrollkästchen ausgewählt ist, das eine Änderungsaktion hat. Für das folgende Beispiel wird checkbox.value nicht aktiviert, wenn das Kontrollkästchen aktiviert ist.

{{ input type="checkbox" disabled=checkbox.disabled checked=checkbox.value change=(action "disableCheckboxes" val)}} {{checkbox.label}} 

Allerdings, wenn ich die Aktion entfernen sie gesetzt bekommt:

{{ input type="checkbox" disabled=checkbox.disabled checked=checkbox.value}} {{checkbox.label}} 

Full example on JSFiddle

Wie kann ich den Wert gesetzt, während immer noch die Aktion ausgeführt wird? Oder ist das eine bessere Möglichkeit, das Kontrollkästchen deaktiviert zu deaktivieren, wenn 2 bereits ausgewählt wurden?

Answer 1

Nun, zuerst können Sie eine Aktion verwenden. Zur Kasse gehen this ember-twiddle.

---

Aber ich würde empfehlen, Ihren Wert direkt an Ihr Zielobjekt zu binden. See here.

Die Idee ist im Grunde Ihr Array zu wickeln und die isDisabled in der Verpackung berechnen:

boxes:[{id:1,value:true},{id:2},{id:3}], 
boxArr: Ember.computed('boxes.@each.value', { 
    get() { 
    let disableOthers = Ember.get(this, 'boxes').filterBy('value', true).get('length') >= 2; 
    return Ember.get(this, 'boxes').map(origin => { 
     return { 
     origin, 
     disabled: disableOthers && !origin.value, 
     }; 
    }); 
    } 
}), 

Dann können Sie es nur in der Vorlage verwenden:

{{#each boxArr as |box|}} 
    {{input type="checkbox" disabled=box.disabled checked=box.origin.value}} {{box.origin.id}} 
{{/each}} 

---

Ein dritte Weg zu archivieren ist mit einem Helfer. Sie können einfach eine berechnete Eigenschaft haben, die besagt, dass alle Kontrollkästchen mit value=false deaktiviert werden sollen, und dann einen and und not Helfer verwenden, um disabled=(and disableFalseCheckboxes (not box.value) festzulegen. Checkout ember-truth-helpers dafür.