ember.jsは、{{#each}}タグをテンプレートで使用するときにinfinteループを提供します

Question

ember.jsを使用して、次のコードを使用して無限のループを取得します。

コントローラ：

App.activityDetailsController = Em.Object.create({
  activityBinding :     'App.navController.selectedActivity',

  data : function(){
    var things = new Array();
    if(this.activity){
      var info = this.activity.get('info');
      var len = info.length;
      for(var i=0; i<len; i++){
        for(prop in info[i]){
          things.push({"key": prop, "value" : info[i][prop]});       
        }
      }
    }

    return things;
  }.property('activity')    
})

意見：

App.ActivityDetailsView = Em.View.extend({
  templateName :        'activity-details',
  activityBinding :     'App.activityDetailsController.activity',
  dataBinding :         'App.activityDetailsController.data'

})

テンプレート：

  <script type="text/x-handlebars" data-template-name="activity-details">
    <div id="info">
      {{#each data}}
          {{key}}: {{value}}<br />
      {{/each}}
    </div>
  </script>

このページをロードしようとすると、コントローラーの「データ」関数は無限に呼ばれます。

ビューから{{#each}} {{/exh}}ブロックを削除すると、テンプレートで{{data.length}}を使用するには問題がなく、正しい出力が得られます。

これが際限なくループする理由はありますか？プロパティコールから「アクティビティ」を削除すると、問題は同じです。

ありがとう、

Answer 1

「データ」プロパティを作成します cacheable(). 。見る エブリンの答え 理由のために関連する質問に。