2016-07-12 3 views
0

少しオーバーした気がします。私はこれまでの答えを広範囲に捜し求めましたが、テンプレートの適切な更新を引き起こさないと思われるボタンからのアクションがありますが、その理由はわかりません。Ember 2.6ボタンアクションバインディングがテンプレート更新をトリガーしない

私はember docs for route actionsから直接作業しており、インライン対コンポーネントのような組み合わせを試してみたいと思います。悲しいかな、私は困惑しているので、私はここで助けに来ています。ここに私のコードは次のとおりですされている

// 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}}

低いコンポーネント:

// 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}}

これを呼び出していることをコンポーネント自体はかなり単純であり、このようになりますそこにもありますが、この質問には関係ありません。

この問題のキッカーは、上記のコードからわかるように、同じプロパティにバインドされたember入力ヘルパーも持っています。このテキスト入力を更新すると、下部コンポーネントの条件が期待どおりに実行され、ボタンテキストが更新されます。ただし、ボタンを使用すると、条件付きの下位コンポーネントもボタンの条件付きインラインも機能せず、デフォルト状態のままです。

私は徹底的にこれに対する回答を探してみましたが、空になっています。私はも試してみました計算されたプロパティ両方のルートと下位コンポーネントの両方でいいえavail。私はそれが簡単な解決策だと確信していますが、私は完全にそれを逃しています。

私の質問は簡単ですが、なぜボタンからのアクションが条件付きでテンプレートを更新しないのでしょうか? console.logイベントです。 ご協力いただければ幸いです。

答えて

1

Routeのプロパティはテンプレートにありません。あなたのテンプレートの文脈は、あなたのルートのモデルフックによって返されたモデルへの(予期しないバグの大きな原因)プロキシをルートのためのControllerです。

このようにルートアクションを使用するには、コントローラのパラメータを更新するか、モデルのプロパティを更新する必要があります。

または、コントローラーを実装します。アクションを処理し、計算されたプロパティを公開するためのトップレベルのルートコントローラは、将来の廃止予定については既に聞いたことがあるにもかかわらず、まだ完全にOKです。

+0

ありがとうございました。私はこのためにロジックをコンポーネントにさらにシフトさせてしまいました。私は、ルート上のプロパティがテンプレートで利用できなかったことを知らなかった。それらをシフトすることはこれを解決した。 –