A mess with observable and observable array concepts


#1

Hi everyone, I´m using RadlistView and Carrousel plugins in same layout, before describe my issue let me say they´re awesome.
So, in my code there are a RadlistView which contains a carrousel and inside it carrouselItems with images.
I want control and access this images with observable event but I’m not getting.
I guess that happen because my dataItem is array and I want control another array inside it.

const data = [
  {
    isFinished: false,
    size() {
      return this.images.length;
    },
    images: [
      {
        thumb: null,
        title: "A title",
        description: "An description",
      },
      {
       thumb: null,
        title: "A title",
        description: "An description",
      }
    ]
  },
  {
    isFinished: false,
    size() {
      return this.images.length;
    },
    images[
      {
        thumb: null,
        title: "A title",
        description: "An description",
      }
    ]
  }

I try that ways…

args.object.bindingContext.data[0].thumb =  'URL_IMAGE';
args.object.bindingContext.data[0].set('thumb', 'URL_IMAGE')
args.object.bindingContext.data.getItem(0).set('thumb', 'URL_IMAGE')

Any Idea, Thanks!!!


#2

Looks like you have declared a simple array, did you actually create a Observable Array instance which will trigger changes upon adding / removing items.


#3

I did it that way.
I did create a class DataItem and use it on the class HomeViewModel

export class DataItem extends Observable {
  private isFinished;
  private size;
  private images;

  constructor(element) {
    super();
    this.isFinished= element.isFinished;
    this.size = element.size();
    this.images =  element.images;
  }
}

export class HomeViewModel extends Observable {
    private myDataItems;

  constructor() {
    super();

    this.myDataItems = new ObservableArray<DataItem>();

     //my variable 'data' which retrieves from webservice 

    data.forEach(element =>
      this.myDataItems .push(new DataItem(element))
    );
  }
}