How to reformat tr elements with Ember 0.9.8.1?

Question

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 1

{{#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}}

Answer 2

Your problem is the {{#view Cashier.transactionRowView}} block that you're wrapping everything in. It looks like what you're trying to do is define the cashier-transactions template by wrapping everything in {{#view Cashier.transactionRowView}}, when what's actually happening is that you're inserting a transactionRowView (which defines its tagName as 'tr', hence the giant wrapping tr elemet), and you're making the contents of that inserted view everything between {{#view}} and {{/view}}. What you want to be doing is script(type="text/x-handlebars", data-template-name="cashier-transactions") and get rid of the #view and /view. That should get you pretty close if not all the way, but what's most important is making sure to understand how templates are declared and tied to a view.