Ember js hasmany relation sauver des données

Question

J'ai deux modèles dans Ember où l'un est une collection et l'autre est livre. Le modèle de collection a une relation "hasMany" avec "book" et "book" "belongsTo" "collection". Donc ce que je veux faire est d'avoir un formulaire avec les deux modèles et de les stocker en même temps.

Modèle Collection

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

Le modèle de livre

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

La forme

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

Le contrôleur:

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

Comme vous pouvez le voir, j'essaie d'obtenir 2 jeux de livres pour cette collection, mais j'ai du mal à trouver la procédure correcte pour stocker des éléments sur ces modèles. Je suppose que je devrais d'abord stocker le modèle de collection et ensuite pousser les livres individuels à la collection. Est-ce correct? Comment pourrais-je y aller?

Answer 1

Si le livre est déjà enregistré, vous pouvez simplement l'insérer dans la nouvelle collection. Vous n'avez pas besoin d'affecter quoi que ce soit aux variables puisque votre modèle est déjà lié à l'enregistrement.

En guise d'amélioration, je suggère de créer la collection avant l'ajout. Soit dans votre modèle, soit sur l'initiation du contrôleur.

Donc l'action pourrait être aussi simple que cela.

actions:{ 

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

Note: la createRecord ne persistera pas jusqu'à ce que vous appelez .save() mais vous faites pour créer une relation pas besoin .save appeler(). Pardonnez-moi de ne pas avoir remarqué les multiples nouveaux livres, voici un exemple plus pertinent.

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

Avis J'ai utilisé le modèle pour créer la dossiers avant la main et il est passé dans l'action. Vous devrez peut-être enregistrer pour que ces modifications persistent.