I'm using Ember to retrieve JSON data from an API to insert into a table. However, my records are shown in a one single tr element, instead of each record shown in separate tr elements. Does anyone know how to set this? I've been looking all over the Ember docs. I'm using Ember 0.9.8.1.
HTML (in JADE):
script(type="text/x-handlebars")
{{#view Cashier.transactionRowView}}
table
thead
tr
th Date/Time
th User ID
th Amount
th Date/Time
th User ID
th Amount
{{#each Cashier.transactionsController}}
<td>{{datetime}}</td>
<td>{{userId}}</td>
<td>{{amount}}</td>
<td>{{console.datetime}}</td>
<td>{{console.userId}}</td>
<td>{{console.amount}}</td>
{{/each}}
{{/view}}
Cashier = Ember.Application.create(
ready: ->
console.log "Cashier app loaded"
)
Cashier.Transaction = Ember.Object.extend(
id: null
datetime: null
type: null
userId: null
amount: null
)
Cashier.transactionRowView = Em.View.extend({
tagName: 'tr'
templateName: 'cashier-transactions'
});
Cashier.transactionsController = Ember.ArrayController.create(
content: []
resourceUrl: 'http://localhost:8080/prepaid/cashiertransactions'
loadTransactions: ->
self = this
url = this.resourceUrl
$.getJSON url,
cashierId: "test@test.com"
period: "3"
, (data) ->
transactions = data.transactions
$(transactions).each (index, value) ->
t = Cashier.Transaction.create(
id : value.id
datetime : value.datetime
type : value.type
userId : value.userId
amount : value.amount
)
self.pushObject Cashier.Transaction.create(t)
)
{
"status": "OK",
"transactions": [
{
"amount": 22,
"datetime": 1348137916873,
"id": "CSH37916873",
"type": "TOP-UP: kriskhaira@test.com; PAYMENT METHOD: undefined",
"userId": "test@test.com"
},
{
"amount": 222,
"datetime": 1348142501961,
"id": "CSH42501961",
"type": "TOP-UP: test.htc@test.com; PAYMENT METHOD: undefined",
"userId": "test@test.com"
},
{
"amount": 48,
"datetime": 1348550184793,
"id": "CSH50184793",
"type": "TOP-UP: kriskhaira@test.com; PAYMENT METHOD: undefined",
"userId": "test@test.com"
},
{
"amount": 20,
"datetime": 1348550386661,
"id": "CSH50386661",
"type": "TOP-UP: kriskhaira@test.com; PAYMENT METHOD: undefined",
"userId": "test@test.com"
},
{
"amount": 1800000003000,
"datetime": 1348657215712,
"id": "CSH57215712",
"type": "DEDUCT: kriskhaira@test.com - 3GB Data Plan",
"userId": "test@test.com"
}
]
}
{{#view Cashier.transactionRowView}}
<table>
<thead>
<tr>
th Date/Time
th User ID
th Amount
th Date/Time
th User ID
th Amount
</tr>
</thead>
</tbody>
{{#each Cashier.transactionsController}}
<tr>
<td>{{datetime}}</td>
<td>{{userId}}</td>
<td>{{amount}}</td>
<td>{{console.datetime}}</td>
<td>{{console.userId}}</td>
<td>{{console.amount}}</td>
</tr>
{{/each}}
{{/view}}