Computed in #each only trigger once

Learning Team
1

controller: pagesize: 10, page: 1, list: Ember.computed(‘page’, ‘pagesize’, ‘list’, function() { // http request get new list mList by page and pagesize this.set(‘list’, mList);

}

template: {{#each list as |item index|}} … {{}/each}

but Ember.computed only trigger once. When I change page value from 1 to 2 computed not trigger!

2

You shouldn’t be calling set in your computed function. The function is essentially the getter and should return the computed value. Calling set will cause the value to infinitely invalidate itself.

1 Like
4

okay i got it. But I have another problem. I have a button after click perform a action:

let showEditPanel = this.get('list').isAny('selected', true);

->this.get(list).isAny is not a function

how to do solve this?

controller:

  list: Ember.computed('page', 'pagesize', function() {
    let http = this.get('backendmemberHttp');
//it is a promise
    return http.list(this.get('page'), this.get('pagesize')).then(response => {
      if (!response.sus) {
        return;
      }
      return response.list;
    }, (jqXHR, textStatus, errorThrown) => {
      Ember.Logger.debug("textStatus:" + textStatus + ",errorThrown:", errorThrown);
    });
  }),

template await : 

{{#each (await list) as |item index|}}
...show something
{{/each}}
5

Your computed method appears to return a promise. Invoking isAny on a promise is probably the problem.

6

yes it return promise.How to solve?

7

Ember does not automatically resolve promises in templates. You need to resolve the promise yourself. One approach is to place the async operation in the route model method as that can deal with promises. if that does not work, then you need to set another property after the promise resolves. Your action would perform the async operation and then on completion set a property that is displayed.