我试图使用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');
}
}
我知道在将模型值传递给组件时遗漏了一些东西,但不确定如何传递或它属于哪里。
我会很感激任何帮助。
2条答案
按热度按时间o0lyfsai1#
如果有人在看这个问题是使用ember辛烷(3.14+)
这将是你想要的(基于@AhmetEmre的回答):
此时将显示“模板:
组件的JS:
rqdpfwrv2#
HTML select元素的默认值可以通过using selected argument in option tag来实现。
因此,您的模板.hbs将如下所示:
您的component.js将类似于:
你可以看一下this twiddle的例子用法。顺便说一下,这个例子依赖于ember-truth-helpers addon,使用
eq
帮助器。