Ember js有很多关系保存数据

Question

我在 Ember 中有两个模型，一个是 collection，另一个是书本。 Collection 模型与 "book" 和 "book" "belongsTo" "collection" 有 "hasMany" 关系。所以我想做的是有一个包含两个模型的表格并同时存储它们。

Collection 型号

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

如您所见，我正在尝试为此 collection 获取 2 套书籍，但我无法找到将项目存储到这些模型的正确程序。我想我可能必须先存储 collection 模型，然后再将个别书籍推送到 collection。这样对吗？我该怎么做？

Answer 1

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

作为一项改进，我建议在添加之前创建 collection。在您的模型中，或在控制器启动时。

所以动作可以这么简单。

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

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

Ember js有很多关系保存数据

Ember js hasmany relationship saving data

ember.js

ember-data

emberfire