如何僅將模型 [0] 從 Ember 中的模板傳遞給組件？

Question

我只想將模型 [0]（第一個數據元素）傳遞給模板中的組件。 我有一個路由文件如下：

/order.js
export default Route.extend({

  firstIndex: computed('data', {
    get(){
    return Ember.get(this,'data[0]');
    }
  }),

  model(params) {
    return fetch(`/api/salesrowmodel/${params.order_id}`)
    .then(resp => resp.json())
    .then(function(data) {
      return {
        data,
      };
    });
  },
}); 

FirstIndex 是一個計算屬性，用於返回數組的第一個索引數據。 現在在模板中，我想將第一個索引數據傳遞給一個組件：

/order.hbs

<div class="Revenue-values">{{order-detail data=firstIndex.revenueHeader}}</div>

我的示例模型數據如下：

[{
"OrderId": "406-5309498-5972326",
"revenueHeader": {
"Principal": 982.14,
"Product Tax": 117.86,
"Total": 1100
}},
{
"OrderId": "506-5234568-5934567",
"revenueHeader": {
"Principal": 382.54,
"Product Tax": 34.46,
"Total": 234
}}]

它顯示 null 或 undefined 對象正在傳遞給訂單詳細信息。 請幫我解決這個錯誤。

Answer 1

首先，模板沒有綁定到路由，而是綁定到控制器。 所以你需要將你的計算屬性移動到控制器。

Next Ember.get(this,'data[0]'); 是無效的。 您不能使用Ember.get訪問數字屬性，以及數組元素。 依賴鍵computed('data',也應該computed('data.[]',

然而，有一個更簡單的方法：

{{order-detail data=model.firstObject}}

因為 ember 將firstObject和lastObject添加到數組中。