Javascript 如何仅将模型[0]从Ember中的模板传递给组件?

Javascript 如何仅将模型[0]从Ember中的模板传递给组件?,javascript,ember.js,frontend,Javascript,Ember.js,Frontend,我只想将模型[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

我只想将模型[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,
      };
    });
  },
}); 
[{
"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
}}]
FirstIndex是一个计算属性,用于返回数组的第一个索引数据。现在在模板中,我想将第一个索引数据传递给组件:

/order.hbs

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

它显示传递给订单详细信息的对象为null或未定义。请帮我纠正这个错误

首先,模板不绑定到路由,而是绑定到控制器。因此,您需要将计算属性移动到控制器

下一步
Ember.get(这是“数据[0]”)无效。您不能使用
Ember.get
访问数值属性和数组元素。依赖项键
computed('data'),
可能也应该是
computed('data.[]),

然而,有一种简单得多的方法:

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

因为ember将
firstObject
lastObject
添加到数组中。

Hi@Lux,谢谢您的回答。您的解决方案正在运行,但我希望解决方案更通用,我们可以传递任何数据项模型[n]这就是计算属性的原因。你能试着给出一个更一般的解决方案吗?这将是一个很大的帮助。你可以做
Ember.get(这个,'data')[0];