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

Posted 2021-05-06

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

型号咖啡：

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

查看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: "[e-mail]"
      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)
)

来自SERVER的SAMPLE JSON：

{
    "status": "OK",
    "transactions": [
        {
            "amount": 22,
            "datetime": 1348137916873,
            "id": "CSH37916873",
            "type": "TOP-UP: [e-mail]; PAYMENT METHOD: undefined",
            "userId": "[e-mail]"
        },
        {
            "amount": 222,
            "datetime": 1348142501961,
            "id": "CSH42501961",
            "type": "TOP-UP: [e-mail]; PAYMENT METHOD: undefined",
            "userId": "[e-mail]"
        },
        {
            "amount": 48,
            "datetime": 1348550184793,
            "id": "CSH50184793",
            "type": "TOP-UP: [e-mail]; PAYMENT METHOD: undefined",
            "userId": "[e-mail]"
        },
        {
            "amount": 20,
            "datetime": 1348550386661,
            "id": "CSH50386661",
            "type": "TOP-UP: [e-mail]; PAYMENT METHOD: undefined",
            "userId": "[e-mail]"
        },
        {
            "amount": 1800000003000,
            "datetime": 1348657215712,
            "id": "CSH57215712",
            "type": "DEDUCT: [e-mail] - 3GB Data Plan",
            "userId": "[e-mail]"
        }
    ]
}

答案

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

另一答案

你的问题是{{#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。如果不是所有方式，这应该让你非常接近，但最重要的是确保理解如何声明模板并将其绑定到视图。