Ember js hasmany 관계의 데이터 저장

Ember에는 컬렉션이 하나이고 다른 하나는 책인 두 개의 모델이 있습니다. 컬렉션 모델에는 "book"및 "book" "belongsTo" "collection"과 "hasMany"관계가 있습니다. 그래서 내가하고 싶은 것은 두 모델을 가지고 동시에 저장할 수있는 형태입니다.Ember js 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 세트의 서적을 얻으려고하지만이 모델에 항목을 저장하는 올바른 절차를 찾는 데 문제가 있습니다. 컬렉션 모델을 먼저 저장 한 다음 개별 책을 컬렉션으로 푸시해야 할 수도 있습니다. 이 올바른지? 나는 그것에 대해 어떻게 갈 것인가?

출처

2017-09-20 jsg

책이 이미 레코드 인 경우 새 컬렉션으로 간단히 밀어 넣을 수 있습니다. 템플릿이 이미 레코드에 바인딩되어 있으므로 변수에 아무 것도 지정할 필요가 없습니다.

개선 사항으로 추가하기 전에 컬렉션을 만드는 것이 좋습니다. 모델 내 또는 컨트롤러 시작 중 하나.

그래서이 작업은 매우 간단 할 수 있습니다.

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

공지 사항 난을 만들기 위해 모델을 사용했습니다 손에 들어가기 전에 기록하고 행동으로 넘어갑니다. 이러한 변경 사항이 적용되지 않도록 저장해야 할 수도 있습니다.

출처

2017-09-20 15:15:27 BrandonW

책이 같은 인스턴스에서 생성 된 경우 어떨까요? 책을 먼저 저장 한 다음 변수로 만들어서 컬렉션으로 푸시 하시겠습니까? 한 번에 여러 권의 책을 저장하면 this.get ("book")이됩니다. – jsg

동시에 둘 모두를 만든 다음 모음을 책으로 설정하거나 책을 모음으로 밀어 넣을 수 있습니다. 문서는 여기에서 찾을 수 있습니다. https://guides.emberjs.com/v2.15.0/models/relationships/#toc_creating-records @jsg – BrandonW

각 책을 개별적으로 저장하는 경우, 먼저 책을 만들어 두 책을 모두 책으로 가져와야합니다. 컬렉션이 저장 될 때 각 책에 컬렉션을 설정할 수도 있습니다. 매번 책을 추가하는 경우 서식 파일을 통해 작업에 도서를 전달하는 것이 더 쉬울 수 있습니다. 동시에 여러 책에 대한 시나리오로 내 대답을 업데이트하겠습니다. – BrandonW

Ember js hasmany 관계의 데이터 저장

답변

관련 문제