Jak renderować ma wiele danych relacji?

W jaki sposób uzyskać poniższy kod przykładowy, aby renderować nie tylko dane osoby, ale także numery telefonów tej osoby podczas renderowania adresu URL/#/persons/1. Próbuję zapętlić numery telefonów z numerem {{#each phoneNumber in phoneNumbers}}, ale po mojej stronie musi istnieć podstawowy błąd zrozumienia.Jak renderować ma wiele danych relacji?

Teraz mam tylko:

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>

Źródło

2013-03-24 wintermeyer

Ember-dane nie działają jak ActiveRecord w ten wzgląd: kiedy używasz has_many musisz mieć właściwość, która jest zbiorem id s dla rekordów. Nie wystarczy posiadać klucza obcego dla właściciela w odwrotnym modelu.

spróbuj dodać phoneNumbers: [1, 2] do pierwszego Person osprzętu i phoneNumbers: [3] na sekundę.

Jeśli korzystałeś z RESTAdapter, te nazwy kluczy byłyby zamiast tego oznaczone jako phone_number_ids. Jeśli używasz active_model_serializers, możesz użyć funkcji embed, aby automatycznie dołączyć tablicę identyfikatorów.

Źródło

2013-03-24 17:01:36

Zmiana Oprawy do następującego kodu nie mieć znaczenie dla #/osoby/1 App.Person.FIXTURES = [{ id: 1, firstName: 'X', lastName: 'Smith', phone_number_ids: [1, 2] } { ID: 2, IMIĘ: 'Y', NAZWISKO: "Smitha, phone_number_ids: [3] }]; App.PhoneNumber.FIXTURES = [{ ID: 1, person_id: 1, numer: '20' }, { ID: 2, person_id: 1, liczba: '23' }, { id: 3, id_osobisty: 2, numer: "42" }]; – wintermeyer

Ah, ok FixtureSerializer działa nieco inaczej. Zmień je na 'phoneNumbers: [1, 2]' itd. –

Bingo! Dziękuję Ci. – wintermeyer

Jak renderować ma wiele danych relacji?

Odpowiedz

Powiązane problemy