Question

正如您在this SO question的答案中看到的那样，可以在组件模板中使用{{#each}}循环遍历作为数组的组件函数的返回值。为方便起见，我将这些代码复制到最底层。

我试着做类似的事情。在我的模板中，我使用一个组件并将一个带有键值的对象传递给它

{{'my-comp' kvobject=mykvobject}}

在components/my-comp.js中，我创建了一个返回数组的函数

   keyvalues: function(){
      var emberobj = this.get('kvobject');
   //note the object I'm interested in is wrapped in some emberarray or object that is at emberobj[0]; 
      var arr = [];
      for (var key in emberobj[0]){ 
          if(emberobj[0].hasOwnProperty(key)){
               var pair = key + ' : ' + emberobj[0][key];
               arr.push(pair)
           }
      }
      return arr; 

   }

在我的组件模板templates/components/my-comp中，我做

  {{#each pair in keyvalues}}
    {{yield}}
  {{/each}}

但这会抛出一个数组，说the value that #each loops over must be an Array. You passed function keyvalues()。

问题：为什么我不能将从函数返回的数组作为一种计算属性进行循环？下面是我在之后建模代码的链接答案中的代码。

App.IncrementForComponent = Ember.Component.extend({
  numOfTimes: function(){
    var times = this.get('times');
    return new Array(parseInt(times));
  }.property('times')
});

Component template:
<script type="text/x-handlebars" id="components/increment-for">
  {{#each time in numOfTimes}}
    {{ yield }}
  {{/each}}    
</script>

Component usage:
{{#increment-for times=2 }}
  <div>How goes it?</div>
{{/increment-for}}

Answer 1

您需要将.property()添加到函数中，以便它知道评估它而不是按原样使用它。

keyvalues: function(){
  var emberobj = this.get('kvobject');
 //note the object I'm interested in is wrapped in some emberarray or object that is at emberobj[0]; 
  var arr = [];
  for (var key in emberobj[0]){ 
      if(emberobj[0].hasOwnProperty(key)){
           var pair = key + ' : ' + emberobj[0][key];
           arr.push(pair)
       }
  }
  return arr; 

}.property()

同样在较新版本的Ember中，它支持each-in，它允许您迭代对象的键值对。

循环从函数返回的数组

1 个答案: