如何禁用 ember 表单域的自动填充

Question

我有一个表格可以使用 RESTful api 更新 ember 中 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 输入字段，它就会呈现到模型 alumni.

中任何其他记录的 update 页面中的表单字段

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

无变化

如何禁用 ember 表单域的自动填充

How to disable autofill on ember form field

javascript

ember.js