Question

我有一种使用RESTful API更新余烬中alumni的详细信息的表格。是否可以防止表单自动填充我先前输入的与模型中另一条记录对应的表单中的数据？

我的更新路由目录中有以下代码（我使用的是pod-structure）：

controller.js

# app/alumnis/update/controller.js
import Controller from '@ember/controller';
import { get, set } from '@ember/object';

export default Controller.extend({
  firstName: null,

  actions: {
    updateAlumni(value) {
      let firstName = get(this, 'firstName');
      if(firstName) {
        firstName = firstName.charAt(0).toUpperCase() + firstName.slice(1).toLowerCase();
        this.get('store').findRecord('alumni', value).then(function(alumni) {
          alumni.set('firstName', firstName);
          alumni.save();
        });
      }
      this.transitionToRoute('alumnis.show', value)
    },
  },
});

route.js

# app/alumnis/update/route.js
import Route from '@ember/routing/route';
import { set } from '@ember/object';

export default Route.extend({
  model(params) {
    return this.store.findRecord('alumni', params.id);
  },

  setupController(controller, model) {
    set(controller, 'alumni', model);
  }
});

template.hbs

# app/alumnis/update/template.hbs
<form class="alumniForm" {{action "updateAlumni" on="submit"}}>
  <div class="form-group">
    <h3>First Name : {{input name="firstName" type="text" value=firstName placeholder=alumni.firstName autocomplete="off"}}</h3>
  </div>
  <button class="btn btn-primary" {{action "updateAlumni" alumni.id}}>Submit</button>
</form>

router.js

# app/router.js
import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('alumnis', function() {
    this.route('show', {path: '/:id'});
    this.route('add', {path: '/add'});
    this.route('update', {path: '/:id/update'});
  });
});

export default Router;

在每次重新加载后update路线的第一次呈现时，不会自动填充任何表单字段。但是，一旦我们将数据输入到firstName输入字段，它就会呈现为模型update中任何其他记录的alumni页中的表单字段。

Answer 1

重新导航到页面时，在ember中的控制器中设置的属性将保持设置状态。
您所显示的逻辑使我相信您甚至不需要控制器。您正在修改模型属性，保存它并进行过渡。您正在采用一种循环更新记录的方式，校友记录是您的模型，但是您试图从商店中重新获取它。

route.js

# app/alumnis/update/route.js
import Route from '@ember/routing/route';
import { set,get } from '@ember/object';

export default Route.extend({
  model(params) {
    return this.store.findRecord('alumni', params.id);
  },

  updateAlumni() {
      let changedAttrs = get(this, 'model').changedAttributes();
      if (changedAttrs.firstName) {
        let firstName = get(this, 'model.firstName').toLowerCase().capitalize();
        set('model.firstName', firstName);
      }
      get(this,'model').save()
      this.transitionToRoute('alumnis.show', get(this,'model'))
    }
});

template.hbs

# app/alumnis/update/template.hbs
<form class="alumniForm" {{action "updateAlumni" on="submit"}}>
  <div class="form-group">
    <h3>First Name : {{input name="firstName" type="text" value=model.firstName placeholder=alumni.firstName autocomplete="off"}}</h3>
  </div>
  <button class="btn btn-primary" {{action "updateAlumni"}}>Submit</button>
</form>

Answer 2

我可以通过更改以下代码来解决此问题：

controller.js

# app/alumnis/update/controller.js
import Controller from '@ember/controller';
import { get, set } from '@ember/object';

export default Controller.extend({
  firstName: null,

  actions: {
    updateAlumni(value) {
      let alumni = get(this, 'alumni');
      let changedAttrs = alumni.changedAttributes();
      if(changedAttrs.firstName) {
        let firstName = alumni.firstName.toLowerCase().capitalize();
        alumni.set('firstName', firstName);
        alumni.save()
      }
      this.transitionToRoute('alumnis.show', value)
    },
  },
});

template.hbs

# app/alumnis/update/template.hbs
<form class="alumniForm" autocomplete="off" {{action "updateAlumni" on="submit"}}>
  <div class="form-group">
    <h3>First Name : {{input name="firstName" type="text" value=alumni.firstName}}</h3>
  </div>
  <button class="btn btn-primary" {{action "updateAlumni" alumni.id}}>Submit</button>
</form>

app/alumnis/update/route.js中没有变化

如何在余烬表单字段上禁用自动填充

2 个答案: