hasMany 관계 데이터를 렌더링하는 방법은 무엇입니까?

URL/#/persons/1을 렌더링 할 때 사람 데이터뿐만 아니라 그 사람의 전화 번호도 렌더링하도록 다음 예제 코드를 어떻게 얻을 수 있습니까? 나는 {{#each phoneNumber in phoneNumbers}}와 함께 전화 번호를 반복하지만 내 편이 근본적인 이해 오류가되어야한다.hasMany 관계 데이터를 렌더링하는 방법은 무엇입니까?

은 지금은 단지 얻을 :

enter image description here

는 app.js

App = Ember.Application.create({ 
    LOG_TRANSITIONS: true, 
    rootElement: '#container' 
}); 

// Router 
App.Router.map(function() { 
    this.resource('persons', function() { 
    this.resource('person', { path: ':person_id' }); 
    }); 
    this.resource('phoneNumbers', function() { 
    this.resource('phoneNumber', { path: ':phone_number_id' }); 
    }); 
}); 

App.PersonsRoute = Ember.Route.extend({ 
    model: function() { 
    return App.Person.find(); 
    } 
}); 

App.PhoneNumbersRoute = Ember.Route.extend({ 
    model: function() { 
    return App.PhoneNumber.find(); 
    } 
}); 

// Models 
App.Store = DS.Store.extend({ 
    revision: 11, 
    adapter: 'DS.FixtureAdapter' 
}); 

App.Person = DS.Model.extend({ 
    firstName: DS.attr('string'), 
    lastName: DS.attr('string'), 
    phoneNumbers: DS.hasMany('App.PhoneNumber') 
}); 

App.PhoneNumber = DS.Model.extend({ 
    number: DS.attr('string'), 
    person: DS.belongsTo('App.Person') 
}); 

App.Person.FIXTURES = [{ 
    id: 1, 
    firstName: 'X', 
    lastName: 'Smith' 
}, { 
    id: 2, 
    firstName: 'Y', 
    lastName: 'Smith' 
}]; 

App.PhoneNumber.FIXTURES = [{ 
    id: 1, 
    person_id: 1, 
    number: '20' 
}, { 
    id: 2, 
    person_id: 1, 
    number: '23' 
}, { 
    id: 3, 
    person_id: 2, 
    number: '42' 
}];

index.html을이에 액티브처럼 행동하지 않는

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Phone book</title> 
    </head> 
    <body> 
    <div id='container'></div> 

    <script type="text/x-handlebars" data-template-name="application"> 
     {{outlet}} 
    </script> 

    <script type="text/x-handlebars" data-template-name="persons"> 
     <p>All people:</p> 
     <ul> 
     {{#each controller}} 
      <li>{{firstName}} {{lastName}}</li> 
     {{/each}} 
     </ul> 
     {{outlet}} 
    </script> 

    <script type="text/x-handlebars" data-template-name="person"> 
     <h1>{{firstName}} {{lastName}}</h1> 
     {{#if phoneNumbers.length}} 
     <ul> 
      {{#each phoneNumber in phoneNumbers}} 
      <li>{{phoneNumber.number}}</li> 
      {{/each}} 
     </ul> 
     {{/if}} 
    </script> 

    <script type="text/x-handlebars" data-template-name="phone_numbers"> 
     <ul> 
     {{#each controller}} 
      <li>{{number}}</li> 
     {{/each}} 
     </ul> 
     {{outlet}} 
    </script> 

    <script type="text/x-handlebars" data-template-name="phone_number"> 
     <h1>{{number}}</h1> 
    </script>  

    </body> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/handlebars.js"></script> 
    <script type="text/javascript" src="js/ember.js"></script> 
    <script type="text/javascript" src="js/ember-data.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
</html>

출처

2013-03-24 wintermeyer

엠버 데이터 안부 : has_many을 사용할 때 그 속성을 가져야합니다. 레코드의 배열은 id입니다. 상호 모델에서 소유자의 외래 키를 갖는 것만으로는 충분하지 않습니다.

첫 번째 Person 조명에 phoneNumbers: [1, 2]을 추가하고 두 번째 조명에 phoneNumbers: [3]을 추가하십시오.

RESTAdapter를 사용하는 경우 해당 키 이름은 phone_number_ids이됩니다. active_model_serializers을 사용하는 경우 embed 기능을 사용하여 자동으로 ID 배열을 포함 할 수 있습니다. #에 대한 차이를하지 않았다 다음 코드로 설비 변경

출처

2013-03-24 17:01:36

/명/1 App.Person.FIXTURES의 = [{ ID : 1, firstName을 'X', 이 lastName : '스미스', phone_number_ids [1,2] }, { ID : 2 firstName을 'Y', 이 lastName '스미스, phone_number_ids [3] }]; 의 App.PhoneNumber.FIXTURES = [{ ID : 1 person_id로 1, 번호 '20' }, { ID : 2 person_id로 1, 번호 '23' }, { id : 3, person_id : 2, 번호 : '42' ]]; – wintermeyer

Ah, FixtureSerializer는 약간 다르게 작동합니다. 'phoneNumbers : [1, 2]'등으로 변경하십시오. –

빙고! 고맙습니다. – wintermeyer

hasMany 관계 데이터를 렌더링하는 방법은 무엇입니까?

답변

관련 문제