0

我正在使用 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}}

应用咖啡脚本：

Cashier = Ember.Application.create(
  ready: ->
    console.log "Cashier app loaded"
)

模型咖啡脚本：

Cashier.Transaction = Ember.Object.extend(
  id: null
  datetime: null
  type: null
  userId: null
  amount: null
)

查看咖啡脚本：

Cashier.transactionRowView = Em.View.extend({
  tagName: 'tr'
  templateName: 'cashier-transactions'
});

控制器咖啡脚本：

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"
        }
    ]
}
4

2 回答 2

1

您的问题是{{#view Cashier.transactionRowView}}您将所有内容包装在其中的块。看起来您正在尝试做的是cashier-transactions通过将所有内容包装在中来定义模板{{#view Cashier.transactionRowView}}，而实际发生的是您正在插入一个 transactionRowView （它将其 tagName 定义为'tr'，因此是巨大的包装 tr elemet），并且您正在使插入视图的内容介于{{#view}}和之间{{/view}}。您想要做的是script(type="text/x-handlebars", data-template-name="cashier-transactions")摆脱#view 和/view。如果不是一路走来，那应该会让您非常接近，但最重要的是确保了解模板是如何声明和绑定到视图的。

于 2012-09-27T04:01:08.147 回答
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}}
于 2012-09-27T05:11:49.637 回答