Kris Khaira Kris Khaira - 8 months ago 113
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: "[email protected]"
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: [email protected]; PAYMENT METHOD: undefined",
"userId": "[email protected]"
},
{
"amount": 222,
"datetime": 1348142501961,
"id": "CSH42501961",
"type": "TOP-UP: [email protected]; PAYMENT METHOD: undefined",
"userId": "[email protected]"
},
{
"amount": 48,
"datetime": 1348550184793,
"id": "CSH50184793",
"type": "TOP-UP: [email protected]; PAYMENT METHOD: undefined",
"userId": "[email protected]"
},
{
"amount": 20,
"datetime": 1348550386661,
"id": "CSH50386661",
"type": "TOP-UP: [email protected]; PAYMENT METHOD: undefined",
"userId": "[email protected]"
},
{
"amount": 1800000003000,
"datetime": 1348657215712,
"id": "CSH57215712",
"type": "DEDUCT: [email protected] - 3GB Data Plan",
"userId": "[email protected]"
}
]
}

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