0

Ember を使用して API から JSON データを取得し、テーブルに挿入しています。ただし、私のレコードは、各レコードが個別の tr 要素で表示されるのではなく、1 つの 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}}すべてをラップしているブロックです。実際に発生しているのは、transactionRowView（tagNameを次のように定義します）を挿入しているときcashier-transactionsに、すべてをラップしてテンプレートを定義することです。 {{#view Cashier.transactionRowView}}'tr'、したがって巨大なラッピングトレメット）、そしてあなたはその挿入されたコンテンツにとの間のすべてを表示させてい{{#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 に答える