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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用Ember 0.9.8.1重新格式化tr元素?相关的知识,希望对你有一定的参考价值。

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

来自SERVER的SAMPLE 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"
        }
    ]
}
答案
{{#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。如果不是所有方式,这应该让你非常接近,但最重要的是确保理解如何声明模板并将其绑定到视图。

以上是关于如何使用Ember 0.9.8.1重新格式化tr元素?的主要内容,如果未能解决你的问题,请参考以下文章

将网站重新设计为 Ember

Ember CLI:在哪里重新打开框架类

Ember:模型更改时重新渲染路线的模板

Ember - 嵌套子路由在路由刷新/重新加载时丢失模型

如何让 Java / Spring MVC 返回基于 jsonapi.org ID 的格式?

Ember.js:重新加载通过有效负载中的“链接”给出的 .hasMany 关系