Ember js有很多关系保存数据

时间:2017-09-20 13:09:28

标签: ember.js ember-data emberfire

我在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套书籍,但我无法找到将项目存储到这些模型的正确程序。我想我可能必须首先存储集合模型,然后将各个书籍推送到集合中。它是否正确?我该怎么做呢?

1 个答案:

答案 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);
  },
}

注意我已经使用该模型预先创建记录并将其传递给动作。您仍可能需要保存才能保留这些更改。