templatesember.jsember-controllersember-octane

Ember Octane - Display contents of a Tracked Array from Controller in Template?


I am trying to render access the contents of an array stored in the controller from within the template. The array starts empty but objects are added to it using a method in the controller:

import Controller from '@ember/controller';
import {action} from '@ember/object';
import {tracked} from '@glimmer/tracking';

export default class ControllerName extends Controller {

  @tracked
  displayedArray = new Array();

  @action
  async setUpArray(){
    let object1 = {Key1:[1,2], Key2: [3,4]};
    let object2 = {Key1:[5,6], Key2: [7,8]};
    this.displayedArray.push(object1);
    this.displayedArray.push(object2);
  }
}

I am able to call setUpArray() from the template and have confirmed it is running as expected and producing setting the tracked variable to an array of the two objects.

However I do not seem to be able to display anything relating to displayedArray in the template. I have tried the following:

//Returns blank - I expected [object,object]
{{this.displayedArray}}

//Returns blank
{{this.displayedArray 0}}

//Returns 0 before and after the *setUpArray()* function is called
{{this.displayArray.length}}

As far as I can tell the issue only happens with arrays or at least arrays containing objects. I am able to display strings or other tracked variables set up in the controller just fine.

Does anyone know why Ember is failing to display this?


Solution

  • Objects are not @tracked deeply in Octane. Either one of the following should work:

    1. Set the array variable to new value instead of mutating existing array:
    this.displayedArray = [...this.displayedArray, object1, object2];
    
    1. Use ember-deep-tracked addon:
    import { tracked } from 'ember-deep-tracked';
    
    export default class ControllerName extends Controller {
      @tracked displayedArray = new Array();
    }