dimanche 23 janvier 2022

Ember tracked list not reflected in Each

I'm using the Each helper to loop over a tracked list of items. No matter what I do, though, the component prints out the list as empty and won't re-compute. I tried wrapping my list in an Ember Array to see if that'd help with the tracking, but it didn't. When I use the logger helper in my .hbs, the items property prints out as a fulfilled promise of the correct number of array elements. If I switch getItems to use .then() instead of await, it prints as undefined.

I know sometimes you need to "reset" arrays so that they notify subscribers properly... is that necessary here even though the sub-objects are tracked? How can I get this array to be truly tracked?

**item-table.js
import { A } from '@ember/array';
export default class ItemTableComponent extends Component
{
  @tracked items = this.getItems();

  async getItems()
  {
    let allItems = await this.store.findAll('item');
    const ingredients = this.inventory.currentInventory?.ingredients ?? {}; // Inventory service
    let tableItems = <array of new ItemCount objects>
    return A(tableItems);
  }
}

class ItemCount
{
    @tracked item;
    @tracked count;

    constructor(item, count)
    {
        this.item = item;
        this.count = count;
    }
}

**item-table.hbs





Aucun commentaire:

Enregistrer un commentaire