2016-06-14 54 views
0

我有一个组件中的烬包含两个单独的列。我正在使用一个助手来获取数组并将该数组拆分为两列,在第一列显示evens并在左侧显示赔率。在控制台中显示助手正在接收未定义的对象。在余烬帮手正在接收“未定义”

index.hbs:

<div class="row" style="padding:0% 3%"> 
    {{component numbers=model}} 
</div> 

index.js:

import Ember from 'ember'; 
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin'; 
export default Ember.Route.extend(AuthenticatedRouteMixin, { 
    model() { 
     return this.store.findAll('number'); 
    } 
}); 

component.hbs(具有两列成分):

<div class="row"> 
<div class="small-6 columns"> 
{{#each (twoColumns numbers 1) as |number|}} 
    <h3><b>{{number.value}}</b></h3> 
    <h6>{{number.title}}</h6> 
{{/each}} 
</div> 
{{#each (twoColumns numbers 2) as |number|}} 
    <h3><b>{{number.value}}</b></h3> 
    <h6>{{number.title}}</h6> 
{{/each}} 
</div> 
</div> 

twoColumns.js(辅助) :

import Ember from 'ember'; 

export function twoColumns(params) { 
    let arrayToSplit = params[0]; 
    let column = params[1]; 
    Ember.Logger.info(arrayToSplit); //this prints an empty array 
    var i; 
    var col1 = []; 
    var col2 = []; 
    for(i=0; i<arrayToSplit.length; i+=1) { 
     if(i%2==0) { 
      col1.push(byTheNumbers[i]); 
     } else { 
      col2.push(byTheNumbers[i]); 
     } 
    } 
    if (column == 1) { 
    return col1; 
    } else { 
    return col2; 
    } 
} 

export default Ember.Helper.helper(twoColumns); 

另外,如果我这样做,在阵列显示效果细腻的所有元素:

<div class="row"> 
<div class="small-12 columns"> 
{{#each numbers as |number|}} 
    <h3><b>{{number.value}}</b></h3> 
    <h6>{{number.title}}</h6> 
{{/each}} 
</div> 

回答

0

是的,我已经做了这种方式,通过使用组件,在组件,您可以写这些计算性能和component.hbs使用。

evenItems: Ember.computed('numbers.[]', function() { 
    return this.get('numbers').filter(function(num){ return num.value % 2 === 0 }) 
}), 

oddItems: Ember.computed('numbers.[]', function(number) { 
    return this.get('numbers').filter(function(num){ return num.value % 2 !== 0 ;}) 
}) 

您可以点击这里https://ember-twiddle.com/fc3e3e85c1a25fea6865d36822c45864?openFiles=components.even-odd.js%2Ctemplates.components.even-odd.hbs