Question

我正在尝试使用ember从最初的原则中添加一个SELECT字段，并且在弄清楚如何在编辑记录时将当前选择的选项传递给表单时遇到困难。

我已经将表单设置为组件，并且能够在创建新记录时成功使用它，并将选定的值传递到Rails后端。我的问题是，在编辑现有记录时，我无法解决将所选值应用于表单组件的方法。

这是组件模板部分（book-form.hbs）：

"package-name": "<your user name>/<your package name>#<your branch>"

模板代码（book-form.js）：

  <div class="form-group">
    <select id="format" onchange={{action 'updateValue' value='target.value'}}>
      <option value=""></option>
      <option value="Paperback">Paperback</option>
      <option value="Hardcover">Hardcover</option>
      <option value="E-Book">E-Book</option>
    </select>

新建和修改模板：

import Component from '@ember/component';

export default Component.extend({
  actions: {
    submitChange(param) {
      this.onSave(param, this.selectedOpt);
    },
    selectedOpt: "",
    updateValue(value) {
      this.set('value', value);
      this.selectedOpt = value;
    },
  }
});

新控制器：

{{book-form onSave=(action 'saveBook') model=model}}

编辑控制器：

export default Controller.extend({
  actions: {
    saveBook(newBook,format) {
      var tmp = this.store.createRecord('book', {
        title: newBook.title,
        author: newBook.author,
        genre: newBook.genre,
        format: format,
      });
      tmp.save();
      this.transitionToRoute('books.list');
    }
  }
});

我知道我在某个地方缺少某种东西来将模型值传递给组件，但不确定如何做到这一点或它所属的地方。

我将不胜感激。

Answer 1

HTML选择元素的默认值可以通过using selected argument in option tag来实现。

所以您的模板.hbs类似于：

zcat rare_seq.txt.gz >> 
NNGGGCGACAGAC
NNGGGCGACAGAC
CCCTTGTTCAGAT

和您的component.js将像：

zcat rare_seq.txt.gz | wc -l >> 3

您可以查看this twiddle的示例用法。顺便说一句，此示例使用<select id="format" onchange={{action 'updateValue'}}> <option value=""></option> <option value="Paperback" selected={{eq value "Paperback"}} >Paperback</option> <option value="Hardcover" selected={{eq value "Hardcover"}} >Hardcover</option> <option value="E-Book" selected={{eq value "E-Book"}}>E-Book</option> </select>帮助程序依赖于ember-truth-helpers addon。

Answer 2

如果有人正在使用Ember Octane（3.14 +）

这就是您想要的（基于@AhmetEmre的回答）：

模板：

<select id="format" {{on 'change' this.updateValue}}>
  <option value=""></option>
  <option value="Paperback" selected={{eq this.value "Paperback"}} >Paperback</option>
  <option value="Hardcover" selected={{eq this.value "Hardcover"}} >Hardcover</option>
  <option value="E-Book" selected={{eq this.value "E-Book"}}>E-Book</option>
</select>

该组件的JS：

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class MyComponent extends Component {
  @tracked value = 'Hardcover';

  @action updateValue(event) {
    this.value = event.target.value;
  }
}

emberjs：将选择的值传递给表单中的选择字段

2 个答案: