如何渲染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

灰燼數據在此不採取行動，比如ActiveRecord關於：當你使用has_many你必須有一個屬性是記錄的數組id。在互惠模型上爲所有者設置外鍵是不夠的。

嘗試將phoneNumbers: [1, 2]添加到您的第一個Person夾具和phoneNumbers: [3]第二個。

如果您使用的是RESTAdapter，那麼這些鍵名將代替爲phone_number_ids。如果您使用active_model_serializers，則可以使用embed功能自動包含一個ID數組。

來源

2013-03-24 17:01:36

改變燈具到下面的代碼沒有做出差爲＃/人/ 1 App.Person.FIXTURES = [{ ID：1，姓： 'X'，名字： '史密斯'， phone_number_ids：[1，2] }，{ ID：2，姓： 'Y'，名字： '史密斯'， phone_number_ids：[3] }]; App.PhoneNumber.FIXTURES = [{ ID：1，爲person_id：1，數： '20' }，{ ID：2，爲person_id：1，數： '23' }，{ id：3， person_id：2， number：'42' }]; – wintermeyer 2013-03-24 17:23:48

嗯，FixtureSerializer的工作方式稍有不同。更改爲'phoneNumbers：[1，2]'等 – 2013-03-24 17:53:42

賓果！謝謝。 – wintermeyer 2013-03-24 18:51:59

如何渲染hasMany關係數據？

回答

相關問題