Wie wird der Kollaps angezeigt, wenn das Kontrollkästchen in Ember-Bootstrap aktiviert wurde?

Question

Ich bin ziemlich neu in Ember und ich versuche, eine Collapse-Methode zu implementieren, wenn ich ein Kontrollkästchen als Teil meines Formulars angeklickt habe. Dieses Kontrollkästchen befindet sich in einem ausgeblendeten Abschnitt einer Schaltflächengruppe, die ich in meinem Formular habe.

Template.hbs

 {{#bs-button onClick=(action "toggle")}} 
     {{#if collapsed}} 
      {{form.element controlType="checkbox" label="View Additional Fields" property="additionalFields"}} 
     {{/if}} 
     <div> 
      {{#bs-collapse collapsed=collapsed}} 
      {{form.element controlType="checkbox" label="Property" property="property"}} 
      {{form.element controlType="textarea" label="Instructions:" name="instructions" property="instructions"}} 
      {{/bs-collapse}} 
     </div> 
     {{/bs-button}} 

Component.js

collapsed: true, 
actions: { 
toggle() { 
    let toggleValue = !get(this, 'collapsed'); 
    set(this, 'collapsed', toggleValue); 
    } 
} 

Beim Laufen ember dienen und ich gehe zu meiner Form, wenn ich auf das Kontrollkästchen klicken Sie einen Fehler in Ember erscheint Inspector:

Bestätigung fehlgeschlagen: Sie können die onChange-Aktion des Formularelements nicht für Formularelemente verwenden, wenn Sie kein Modell verwenden oder den Wert direkt auf einem Formularelement festlegen. Sie müssen in diesem Fall Ihre eigene onChange-Aktion zum Formularelement hinzufügen! Fehler

Wenn ich onClick ändern dann nicht angezeigt Felder onChange, wenn ich das Kontrollkästchen klicken, aber ich noch die Störung. Was wäre der beste Weg, um dieses Problem zu beheben?

Answer 1

Der Fehler, mit dem Sie konfrontiert sind, hat nichts mit {{bs-collapse}} oder onClick Aktion zu tun. Es scheint, dass Ihre {{bs-form}} keine model Eigenschaft hat, aber ember-bootstrap erfordert, dass Sie eine onChange Aktion zu jedem {{form.element}}. Details finden Sie in ember-bootstrap api docs und in source code.