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

在complete函数中手动设置model数据不是刷新路由的正确方法。
组件发送数据设置 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')}}

Ember 从组件发送数据到路由并刷新它

Ember send data from component to route and refresh it

javascript

ember.js

ember-data