Ember 從組件發送數據到路由並刷新它

Question

我的 Ember 應用程序中有一個路由，它在 URL 中查找電子郵件作為查詢參數，並根據它加載數據。

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組件：

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

然后是組件本身。 我希望能夠將數據從此組件發送到路由，從而更新模型：

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') 。

目前我不確定如何擁有可以通過查詢參數加載數據以及從組件發送到它的數據的路由。

Answer 1

1. 在complete功能中手動設置model數據不是刷新路由的正確方法。
2. 組件將數據發送到設置model不是正確的刷新路線。

我鼓勵你使用queryParams和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')}}