Kris Khaira Kris Khaira - 6 months ago 88
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"
}
]
}

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