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