javascript - 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 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. 组件发送数据来设置模型不是刷新路由的正确方法。

我鼓励您使用queryParams with refreshModel:true

我修改了您的代码，请您尝试一下。

路线文件，

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

Controller 文件，

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