Ember 2.6 Button Aktion Bindung nicht auslösen Vorlage Update

Question

Ich komme zu Stackoverflow Gefühl ein wenig besiegt. Ich habe weit und breit nach einer Antwort darauf gesucht, aber ich habe eine Aktion von einer Schaltfläche, die anscheinend keine korrekte Aktualisierung einer Vorlage auslöst, und ich weiß nicht warum.

Ich arbeite direkt von der ember docs for route actions und habe mehr Kombinationen von Dingen, wie Inline vs Komponente, versucht, als ich möchte admin. Leider bin ich ratlos, also komme ich hier um Hilfe. Hier ist mein Code:

// app/admin/users/edit/route.js 
 
import Ember from 'ember'; 
 

 
export default Ember.Route.extend({ 
 
    isEditingPassword: false, 
 
    actions: { 
 
    toggleBody() { 
 
     this.toggleProperty('isShowingBody'); 
 
    }, 
 
    editPassword() { 
 
     this.toggleProperty('isEditingPassword') 
 
     console.log('(after toggle) isEditingPassword', this.get('isEditingPassword')) 
 
    }, 
 
    saveUser(model) { 
 
     model.save().then(()=> { 
 
     console.log('we saved!') 
 
     this.transitionTo('admin.users'); 
 
     }) 
 
    } 
 
    } 
 
});

<!-- app/admin/users/edit/template.hbs --> 
 
{{outlet}} 
 
<button {{action "editPassword" on="click"}} class='button is-danger'>{{if isEditingPassword "Edit user" "Edit Password"}}</button> 
 
{{input class="input" type="text" name='title' value=isEditingPassword placeholder="True"}} 
 

 

 
{{#admin-user isEditingPassword=isEditingPassword model=model saveUser='saveUser'}}{{/admin-user}}

Die Komponente selbst, dass dies Aufruf ziemlich einfach ist, und sieht wie folgt aus:

// app/components/admin-user/component.js 
 

 
import Ember from 'ember'; 
 

 
export default Ember.Component.extend({ 
 
    actions: { 
 
    saveUser(model) { 
 
     console.log('save the user!', model) 
 
     this.sendAction('saveUser', model); 
 
    }, 
 
    cancel() { 
 
     this.sendAction('cancel') 
 
    } 
 
    } 
 
});

<!-- app/components/admin-user/template.hbs --> 
 
{{yield}} 
 
{{#unless isEditingPassword}} 
 
    {{#admin-user-form model=model 
 
    saveUser='saveUser'}} 
 
    {{/admin-user-form}} 
 
{{else}} 
 
    {{#admin-user-password-form model=model 
 
    saveUser='saveUser'}} 
 
    {{/admin-user-password-form}} 
 
{{/unless}}

Untere Komponenten auch dort, aber nicht relevant für diese Frage.

Der Kicker mit dieser Ausgabe ist, dass, wie Sie aus dem obigen Code sehen können, ich auch eine Ember-Eingabe-Helper, die an die gleiche Eigenschaft gebunden ist. Das Aktualisieren dieser Texteingabe funktioniert und bewirkt, dass die Bedingung in der unteren Komponente wie erwartet ausgelöst wird und der Text der Schaltfläche aktualisiert wird. Jedoch mit der Schaltfläche, weder die untere Komponente bedingte, noch die Inline-Bedingung in der Schaltfläche Funktion überhaupt und bleiben in der Standardeinstellung.

Ich habe erschöpfend versucht, nach Antworten zu suchen, aber komme oben leer. Ich habe auch versucht mit berechneten Eigenschaften sowohl auf der Route und unteren Komponente . Ich bin mir sicher, dass es eine einfache Lösung ist, aber ich vermisse es vollständig.

Also meine Frage ist einfach, warum würde die Aktion von der Schaltfläche nicht die bedingte Aktualisierung in der Vorlage auslösen? Die console.log Ereignis tut Feuer. Jede Hilfe wäre willkommen.

Answer 1

Eigenschaften auf Route sind in Ihrer Vorlage nicht verfügbar. Der Kontext für Ihre Vorlage ist Controller für die Route, die (große Quelle unerwarteter Fehler) für das Modell, das vom Hook Ihrer Route zurückgegeben wird, Proxies enthält.

Um eine Route-Aktion auf diese Weise zu verwenden, müssten Sie den Parameter auf dem Controller aktualisieren oder eine Eigenschaft des Modells aktualisieren.

Alternativ können Sie den Controller implementieren. Top-Level-Routen-Controller für die Behandlung von Aktionen und das Aussetzen von berechneten Eigenschaften sind immer noch vollkommen in Ordnung, trotz allem, was Sie über ferne zukünftige Abwertungen gehört haben könnten.