如何用Ember 0.9.8.1重新格式化tr元素？

Question

我正在使用Ember從API中檢索JSON數據以插入到表中。但是，我的記錄顯示在一個單獨的tr元素中，而不是每個記錄顯示在單獨的tr元素中。有誰知道如何設置？我一直在看Ember文檔。我使用Ember 0.9.8.1。

HTML（在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' 
}); 

控制器的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) 
) 

樣品JSON從服務器：

{ 
    "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

你的問題是{{#view Cashier.transactionRowView}}塊，你在包裝的一切看起來就像你試圖做的是定義什麼cashier-transactions模板通過將所有內容封裝到{{#view Cashier.transactionRowView}}中，實際發生的事情是您要插入一個transactionRowView（它將tagName定義爲'tr'，因此是巨大的包裝tr elemet），並且您正在製作該插入視圖的內容一切都在之間n {{#view}}和{{/view}}。你想要做的是script(type="text/x-handlebars", data-template-name="cashier-transactions")並擺脫#view和/ view。如果不是所有的方式，這應該會讓你非常接近，但最重要的是確保瞭解如何聲明模板並將其與視圖綁定。