我正在尝试使用下拉菜单设置“belongsTo”关系。
所以我有我的图书模型:
import DS from 'ember-data';
export default DS.Model.extend({
// Relationships
author: DS.belongsTo('author'),
name: DS.attr()
});
还有我的作者模型:
import DS from 'ember-data';
export default DS.Model.extend({
// Relationships
author: DS.hasMany('books'),
name: DS.attr()
});
我的书/新路线:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return Ember.RSVP.hash({
book: this.store.createRecord('book'),
authors: this.store.findAll('author')
})
},
actions: {
saveBook(newBook) {
newBook.book.save().then(() => this.transitionTo('book'));
},
willTransition() {
this.controller.get('book').rollbackAttributes();
}
}
});
还有我的书籍/新模板:
<label >Book Name</label>
{{input type="text" value=model.name placeholder="Book Name"}}
<label>Author</label>
<select>
{{#each model.authors as |author|}}
<option value="{{author.id}}">
{{author.name}}
</option>
{{/each}}
</select>
<button type="submit"{{action 'saveBook' model}}>Add Book</button>
如果我删除 select 元素并只保存书名,它就可以正常工作,但是有了它我得到了这个:(其中 id 是自动生成的 ID)
Error: Some errors were encountered while saving app@model:book id
at reportError (firebase.js:425)
at firebase.js:445
at tryCatch (ember.debug.js:58165)
at invokeCallback (ember.debug.js:58177)
at publish (ember.debug.js:58148)
at publishRejection (ember.debug.js:58091)
at ember.debug.js:37633
at invoke (ember.debug.js:339)
at Queue.flush (ember.debug.js:407)
at DeferredActionQueues.flush (ember.debug.js:531)
我认为我需要做一些事情,比如获取作者对象并将 book.author 设置为该对象,但我找不到具体的解释。特别是因为我什至不知道如何从 route 的选择菜单获取数据!
我觉得我在这里错过了一些非常简单的东西,有人有任何见解吗?
最佳答案
我建议将此功能移至它所属的controller.js 中。为什么 AuthorModel 中与书籍的关系称为 author
而不是 books
?
我建议将您的操作(在 Controller 中)重写为如下所示:
saveBook(newBook) {
newBook.set('author', this.get('selectedAuthor') // or just the call below if you go with the alternative below
newBook.save().then(() => this.transitionTo('book'));
},
现在问题仍然存在,您没有与所选作者的绑定(bind)。我建议使用类似 ember-power-select 的东西将您选择的作者绑定(bind)到 Controller 属性。
然后您将在模板中执行此操作:
{{#power-select
placeholder="Please select Author"
onchange=(action "authorSelectionChanged")
options=model.authors
as |author|}}
{{author.name}}
{{/power-select}}
在 Controller 内的操作
中:
authorSelectionChanged(author) {
this.get('model.book').set('author', author);
// or the following if you go with the alternative above
this.set('selectedAuthor', author);
}
关于javascript - Ember.js 所属关系在选择元素(下拉列表)中创建/编辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41525499/