0

I'm trying to update the content of an array of objects in EmberJS (Version 3.26). I can able to update the content. But it is not reflecting in my UI. I think, my issue is related to two-way binding.

I have already added a trackable decorator (@tracked) for this. It is working for the normal variable. But not for Array of Objects. Please see my JS code below:

    @tracked content = [
        {
          id: 0,
          name: 'Statndard',
          isExpanded: true,
          isSelected: false,
          isVisible: true,
          status: 'Allow',
          children: [
            {
              id: 1,
              name: 'Building A',
              isExpanded: true,
              isSelected: false,
              isVisible: true,
              status: 'Allow',
              children: [],
            },
            {
              id: 2,
              name: 'Building B',
              isExpanded: true,
              isSelected: false,
              isVisible: true,
              status: 'Allow',
              children: [
                {
                  id: 3,
                  name: 'Floor 1',
                  isExpanded: true,
                  isSelected: true,
                  isVisible: true,
                  status: 'Allow',
                  children: [],
                }
              ],
            },
          ],
        },   
];

I have added a method for updating the content array. It is properly updating my array. But the changes not reflecting my UI. My UI code is given below:

{{#x-tree
model=content
as |node|
}}
{{node.model.name}} <br />
<span {{on "click" (fn this.onToggleStatus node)}}>
    {{node.model.status}}</span>
{{node.toggle}}
{{/x-tree}}

I'm using ember simple tree for showing the above array as a tree. Any help would be appreciable!

Vignesh VS
  • 921
  • 1
  • 14
  • 30
  • Does this answer your question? [Why won't my tracked array update in Ember Octane?](https://stackoverflow.com/questions/57468327/why-wont-my-tracked-array-update-in-ember-octane) – Andrey Stukalin Jul 06 '21 at 03:48
  • Thank you for your reply. Actually, it does not answer my question. I tried these things. But not worked. – Vignesh VS Jul 06 '21 at 12:51
  • ok, what exacly doesn't work then? Do you think it's the plugin? – Andrey Stukalin Jul 07 '21 at 03:26
  • 1
    [Array section](https://guides.emberjs.com/release/upgrading/current-edition/tracked-properties/#toc_arrays) on the ember guides there is a section about octane and @tracked for arrays and JavaScript objects. Have you tried defining the array as an ember array. `import { A } from '@ember/array';` then `content = A([ ])` – Chris Parry Jul 07 '21 at 07:21
  • After looking at the ember-simple-tree documentation, it appears that on npm they don't pass an array as the model to x-tree, they pass an object however the github docs pass an array. Have you tried passing an object (remove the square brackets making it an array)? – Chris Parry Jul 07 '21 at 14:19
  • Did you figure this out? I'm curious what the problem was as ember doesn't have two way binding (it's one way data flow) – NullVoxPopuli Oct 08 '21 at 03:16

0 Answers0