Ember.js gives infinte loop when using {{#each}} tag in template

Question

Using Ember.js I get an endless loop with the following code:

Controller:

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')    
})

View:

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

})

Template:

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

When trying to load this page, the 'data' function in the controller is called endlessly.

If I remove the {{#each}}{{/each}} block from the view, there is no problem and using {{data.length}} in the template gives the correct output.

Any ideas why this loops endlessly? If I remove 'activity' from the property call, it the problem is the same.

Thanks,

Wait, won't #each data return a function, not the value of that function? If you want to return a value, why not make it a computer property? — jasonpgignac
– jasonpgignac, Commented Feb 20, 2012 at 18:13

Community · Accepted Answer · 2017-05-23 09:59:28Z

1

Make your "data" property cacheable(). See ebryn's answer to a related question for the reason why.

edited May 23, 2017 at 9:59

CommunityBot

11 silver badge

answered Feb 20, 2012 at 23:51

rharper

2,43821 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ember.js gives infinte loop when using {{#each}} tag in template

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related