2017-02-06 8 views
1

私はEmberアプリケーションの中で、URL内の電子メールをクエリパラメータとして探し出し、それに基づいてデータを読み込みます。Emberがコンポーネントからルートにデータを送信し、それを更新します

{{user-form model=model addUser=(route-action "complete")}} 

そしてコンポーネント自体:このルートから

export default Ember.Route.extend({ 

    queryParams: { 
    email: true 
    }, 

    actions: { 
    complete (data) { 
     this.set('model', data) 
    } 
    }, 

    model ({ email }) { 
    return this.store.queryRecord('user', { email }) 
    } 

}) 

データとアクションがuser-formコンポーネントに渡さなっています。私は順番にモデルを更新した経路、このコンポーネントからのデータを送信できるようにしたいと思います:

export default Ember.Component.extend({ 

    store: Ember.inject.service(), 

    email: null, 

    actions: { 
    async submit() { 
     const store = this.get('store') 
     const email = this.get('email') 
     try { 
     await store.unloadAll('user') 
     const data = await store.queryRecord('user', { email }) 
     await this.get('addUser')(data) 
     } catch (error) { 
     console.log(error) 
     } 
    } 
    } 

}) 

何が起こるしたいことは、データがルートアクションにコンポーネントから送信された場合ということですモデルは新しいユーザーによって更新されます。それだけで、したがってstore.unloadAll('user')

現在、私は、クエリコンポーネントからそれに送信されるデータだけでなく、paramsは介してデータをロードできるルートを持っているかどうかはわかりません(一度に一つのレコードを持っている必要があります。

+0

あなたは 'async'と' await'構文をどうやって得るのですか教えてください。 – kumkanillam

答えて

1
  1. 手動complete機能でmodelデータを設定すると、ルートをリフレッシュする正しい方法ではありません。
  2. コンポーネントmodelを設定するためにデータを送信する正しい方法リフレッシュルートではありません。

私はあなたにあなたのコードを変更しましたqueryParams with refreshModel:true

私はあなたのコードを変更してみてください。

成分を含むながら、ルートファイル、

export default Ember.Route.extend({ 
    queryParams: { email: { refreshModel: true } }, 
    model({ email }) { 
     return this.store.queryRecord('user', { email }) 
    } 
}) 

コントローラファイル、

export default Ember.Controller.extend({ 
    queryParams: ['email'], 
    email: true, //default value 
    actions: { 
     updateEmail(email) { 
      this.set('email', email) //setting email property will refresh route with new value 
     } 
    } 
}); 

コンポーネントファイル、

export default Ember.Component.extend({ 
    email: null, 
    actions: { 
     submit() { 
      this.get('updateEmail')(this.get('email')); 
     } 
    } 
}) 

{{user-form model=model updateEmail=(action 'updateEmail')}} 
+1

素晴らしい、ありがとう! – gosseti

関連する問題