CoffeeScript Question
How to reformat tr elements with Ember 0.9.8.1?
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}}
APP COFFEESCRIPT:
Cashier = Ember.Application.create(
ready: ->
console.log "Cashier app loaded"
)
MODEL COFFEESCRIPT:
Cashier.Transaction = Ember.Object.extend(
id: null
datetime: null
type: null
userId: null
amount: null
)
VIEW COFFEESCRIPT:
Cashier.transactionRowView = Em.View.extend({
tagName: 'tr'
templateName: 'cashier-transactions'
});
CONTROLLER COFFEESCRIPT:
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)
)
SAMPLE JSON FROM SERVER:
{
"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"
}
]
}
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
{{#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}}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download