2017-09-20 2 views
0

Ich habe zwei Modelle in Ember, wo man eine Sammlung ist und das andere Buch ist. Collection-Modell hat eine "hasMany" -Beziehung mit "Buch" und "Buch" "gehört zu" "Sammlung". Also möchte ich eine Form mit beiden Modellen haben und sie gleichzeitig speichern.Ember js hasmany Beziehung speichern Daten

Sammlung Modell

// collection Model 
export default DS.Model.extend({ 
    name: DS.attr('string'), 
    city: DS.attr('string'), 
    books: DS.hasMany('book', { async: true }) 
}); 

Das Buch Modell

//book Model 
export default DS.Model.extend({ 
    title: DS.attr('string'), 
    description: DS.attr('string'), 
    collection: DS.belongsTo('collection', {async: true}) 
}); 

Die Form

//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> 

Der Controller:

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

Wie Sie sehen können, versuche ich 2 Sätze Bücher für diese Sammlung zu erhalten, aber ich habe Probleme beim Finden der richtigen Prozedur zum Speichern von Artikeln in diesen Modellen. Ich denke, ich muss das Sammlungsmodell zuerst speichern und dann die einzelnen Bücher in die Sammlung schieben. Ist das richtig? Wie würde ich darüber gehen?

Antwort

1

Wenn das Buch bereits eine Aufzeichnung ist, können Sie es einfach auf die neue Sammlung schieben. Sie müssen Variablen nichts zuweisen, da Ihre Vorlage bereits an den Datensatz gebunden ist.

Als eine Verbesserung würde ich empfehlen, die Sammlung vor dem Hinzufügen auch zu erstellen. Entweder in Ihrem Modell oder bei der Initialisierung des Controllers.

So könnte die Aktion so einfach sein.

actions:{ 

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

Hinweis: Die create nicht bestehen bleiben, bis Sie .save() aufrufen, aber Sie brauchen nicht .save() aufrufen, um eine Beziehung zu erstellen.

Verzeihen Sie mir, dass ich die vielen neuen Bücher nicht bemerkt habe, hier ist ein relevanteres Beispiel.

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

Hinweis Ich habe das Modell, das zu schaffen Aufzeichnungen vor der Hand und es wird in die Handlung übergeben. Sie müssen möglicherweise noch speichern, damit diese Änderungen bestehen bleiben.

+0

Wie wäre es, wenn das Buch in der gleichen Instanz erstellt wird, würden Sie vorschlagen, das Buch zuerst zu speichern und dann als Variable zu erstellen, um es dann in die Sammlung zu schieben? Da mehrere Bücher gleichzeitig gespeichert werden, wäre es 'this.get (" book ")' – jsg

+0

Sie können beide gleichzeitig erstellen und dann entweder die Sammlung auf das Buch setzen oder das Buch auf die Sammlung schieben. Dokumentation kann hier gefunden werden. https://guides.emberjs.com/v2.15.0/models/relationships/#toc_creating-records @jsg – BrandonW

+0

Wenn jedes Buch separat gespeichert wird, sollten Sie die Sammlung vorher erstellen und beide Bücher dorthin schieben. Sie können die Sammlung auch für jedes Buch festlegen, während es gespeichert wird. Es kann einfacher sein, das Buch über die Vorlage an die Aktion zu übergeben, wenn jedes Mal ein Buch hinzugefügt wird. Ich werde meine Antwort mit einem Szenario für mehrere Bücher gleichzeitig aktualisieren. – BrandonW

Verwandte Themen