ember.js emberjs:将选定的值传递给表单中的选择字段

t40tm48m  于 2022-11-05  发布在  其他
关注(0)|答案(2)|浏览(120)

我试图使用ember从第一原则添加一个SELECT字段,但在编辑记录时,我很难弄清楚如何将当前选定的选项传递到表单。
我已经将表单设置为一个组件,并且在创建新记录时能够成功地使用它,所选的值被传递到Rails后端。我的问题是,我无法找到一种方法,在编辑现有记录时将此所选的值应用到表单组件。
下面是组件模板部分(book-form.hbs):

<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>

模板代码(book-form.js):

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');
    }
  }
});

编辑控制器:

actions: {
    saveBook(book) {
      book.save();
      this.transitionToRoute('books.list');
    }
  }

我知道在将模型值传递给组件时遗漏了一些东西,但不确定如何传递或它属于哪里。
我会很感激任何帮助。

o0lyfsai

o0lyfsai1#

如果有人在看这个问题是使用ember辛烷(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;
  }
}
rqdpfwrv

rqdpfwrv2#

HTML select元素的默认值可以通过using selected argument in option tag来实现。
因此,您的模板.hbs将如下所示:

<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>

您的component.js将类似于:

value: 'Hardcover', 

actions: {
  updateValue(event){
    this.set('value', event.target.value); 
  }
}

你可以看一下this twiddle的例子用法。顺便说一下,这个例子依赖于ember-truth-helpers addon,使用eq帮助器。

相关问题