Ember js 有很多关系保存数据答案

【问题标题】：Ember js hasmany relationship saving dataEmber js 有很多关系保存数据
【发布时间】：2017-09-20 13:09:28
【问题描述】：

我在 Ember 中有两个模型，一个是集合，另一个是书籍。 Collection 模型与“book”和“book”“belongsTo”“collection”有“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 套书籍，但在找到将项目存储到这些模型的正确程序时遇到了麻烦。我想我可能必须先存储集合模型，然后将单个书籍推送到集合中。它是否正确？我该怎么办？

【问题讨论】：

标签： ember.js ember-data emberfire

【解决方案1】：

如果这本书已经是唱片，您可以简单地将其推送到新收藏中。您不需要为变量分配任何内容，因为您的模板已经绑定到记录。

作为一项改进，我建议在添加之前创建集合。无论是在您的模型中，还是在控制器启动时。

所以动作就这么简单。

actions:{

  addCollection: function(){
    // newCollection and Book need to be records
    this.get("newCollection").pushObject(this.get('book'));
  },
}

注意：createRecord 在调用 .save() 之前不会持续存在，但您不需要调用 .save() 来创建关系。

原谅我没有注意到多本新书，这里有一个更贴切的例子。

// 模板.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>

// 路由.js

model () {
  return Ember.RSVP.hash({
    newCollection: this.get('store').createRecord('collection'),
    book1: this.get('store').createRecord('book'),
    book2: this.get('store').createRecord('book')
  })
}

// 控制器.js

actions:{
  addCollection(model) {
    model.newCollection.pushObject(model.book1);
    model.newCollection.pushObject(model.book2);
  },
}

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

【讨论】：

如果这本书是在同一个实例中创建的，您是否建议先存储该书，然后将其创建为变量，然后推送到集合中？由于一次保存多本书，它会是this.get("book")
您可以同时创建两者，然后将收藏设置为图书，或者将图书推送到收藏。文档可以在这里找到。 guides.emberjs.com/v2.15.0/models/relationships/…@jsg
如果每本书都是单独保存的，那么您应该事先创建集合并将两本书都推送到它。您还可以在保存时将集合设置为每本书。如果每次都添加一本书，则通过模板将书籍传递给操作可能更容易。我将同时使用多本书的场景来更新我的答案。
当我尝试在每个字段Cannot call set with 'name' on an undefined object. 中输入数据时出现此错误@
我似乎找不到这个问题的原因。