I'm utilizing an API to retrieve images, and I need it to initially load 10 images. When a button is clicked, it should add another 10 images. This is how I set it up:
Defining the observable for the image amount:
public imageAmount: KnockoutObservable<number> = ko.observable(10);
In this section, I slice the array based on the imageAmount variable, which functions properly.
var images = response.data.slice(0, this.imageAmount()).map((data: IImageData) =>
{
return {
big: 'http://d1ftcqzt8gr3o4.cloudfront.net/'+ data.big,
thumb: 'http://d1ftcqzt8gr3o4.cloudfront.net/'+ data.thumb
}
});
Subsequently, when the button is clicked, I update the imageAmount observable by adding 10 more images.
public moreImages(): void
{
this.viewModel.imageAmount(this.viewModel.imageAmount() + 10);
}
Although the count increases, the additional images are not being added. How can I resolve this?
HTML code:
View HTML format on pastebin as it couldn't be displayed correctly here