我在Ember有两个模特,一个是集合,另一个是书。集合模型与“book”和“book”“belongsTo”“集合”具有“hasMany”关系。所以我想做的是有一个包含两个模型的表单并同时存储它们。
收集模型
// collection Model
export default DS.Model.extend({
name: DS.attr('string'),
city: DS.attr('string'),
books: DS.hasMany('book', { async: true })
});
书籍模型
//book Model
export default DS.Model.extend({
title: DS.attr('string'),
description: DS.attr('string'),
collection: DS.belongsTo('collection', {async: true})
});
表格
//Collection View
<div class="row">
<div class="col-sm-12">
<div class='panel panel-default'>
<div class='panel-body'>
<form>
<fieldset>
<legend>
Collection
</legend>
<div class="row">
<div class="col-sm-6">
<label for="name" class="col-sm-2">Name</label>
<div class="col-sm-10">
{{input id="name" type="text" class="form-control" value=collection.name}}
</div>
</div>
<div class="col-sm-6">
<label for="city" class="col-sm-2">city</label>
<div class="col-sm-10">
{{input id="city" type="text" class="form-control" value=collection.city}}
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>
books
</legend>
<div class="row">
<div class="col-sm-6">
<label for="title1" class="col-sm-2">title</label>
<div class="col-sm-10">
{{input id="title1" type="text" class="form-control" value=book.title1}}
</div>
</div>
<div class="col-sm-6">
<label for="description1" class="col-sm-2">description</label>
<div class="col-sm-10">
{{input id="description1" type="text" class="form-control" value=book.description1}}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label for="title2" class="col-sm-2">title</label>
<div class="col-sm-10">
{{input id="title2" type="text" class="form-control" value=book.title2}}
</div>
</div>
<div class="col-sm-6">
<label for="description2" class="col-sm-2">description</label>
<div class="col-sm-10">
{{input id="description2" type="text" class="form-control" value=book.description2}}
</div>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-sm-12">
<button {{action 'addCollection'}} class="btn btn-primary">New Collection</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
控制器:
actions:{
addCollection: function(){
var name = this.get('collection.name');
var city = this.get('collection.city');
var title1 = this.get('book.title1');
var description1 = this.get('book.description1');
var title2 = this.get('book.title2');
var description2 = this.get('book.description2');
var newCollection = this.store.createRecord('collection', {
name: name,
city: city,
});
},
正如您所看到的那样,我正在尝试为此系列获取2套书籍,但我无法找到将项目存储到这些模型的正确程序。我想我可能必须首先存储集合模型,然后将各个书籍推送到集合中。它是否正确?我该怎么做呢?
答案 0 :(得分:1)
如果这本书已经是一张唱片,你只需将它推到新的收藏中即可。由于模板已经绑定到记录,因此您无需为变量分配任何内容。
作为改进,我建议在添加之前创建集合。在您的模型中,或在控制器启动时。
所以行动可以像这样简单。
actions:{
addCollection: function(){
// newCollection and Book need to be records
this.get("newCollection").pushObject(this.get('book'));
},
}
注意:在调用.save()之前,createRecord不会保留,但您不需要调用.save()来创建关系。
原谅我没有注意到多本新书,这里有一个更为贴切的例子。
// template.hbs
<div class="row">
<div class="col-sm-12">
<div class='panel panel-default'>
<div class='panel-body'>
<form>
<fieldset>
<legend>
Collection
</legend>
<div class="row">
<div class="col-sm-6">
<label for="name" class="col-sm-2">Name</label>
<div class="col-sm-10">
{{input id="name" type="text" class="form-control" value=model.newCollection.name}}
</div>
</div>
<div class="col-sm-6">
<label for="city" class="col-sm-2">city</label>
<div class="col-sm-10">
{{input id="city" type="text" class="form-control" value=model.newCollection.city}}
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>
books
</legend>
<div class="row">
<div class="col-sm-6">
<label for="title1" class="col-sm-2">title</label>
<div class="col-sm-10">
{{input id="title1" type="text" class="form-control" value=model.book1.title}}
</div>
</div>
<div class="col-sm-6">
<label for="description1" class="col-sm-2">description</label>
<div class="col-sm-10">
{{input id="description1" type="text" class="form-control" value=model.book1.description}}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label for="title2" class="col-sm-2">title</label>
<div class="col-sm-10">
{{input id="title2" type="text" class="form-control" value=model.book2.title}}
</div>
</div>
<div class="col-sm-6">
<label for="description2" class="col-sm-2">description</label>
<div class="col-sm-10">
{{input id="description2" type="text" class="form-control" value=model.book2.description}}
</div>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-sm-12">
<button {{action 'addCollection' model}} class="btn btn-primary">New Collection</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
// route.js
model () {
return Ember.RSVP.hash({
newCollection: this.get('store').createRecord('collection'),
book1: this.get('store').createRecord('book'),
book2: this.get('store').createRecord('book')
})
}
// controller.js
actions:{
addCollection(model) {
model.newCollection.pushObject(model.book1);
model.newCollection.pushObject(model.book2);
},
}
注意我已经使用该模型预先创建记录并将其传递给动作。您仍可能需要保存才能保留这些更改。