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

在model函数中手动设置complete数据不是刷新路径的正确方法。
将数据发送到设置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从组件发送数据到路由并刷新它

1 个答案: