CODEWITHSUNDEEP
typescriptdata-bindingbindingaurelia
Johnnie 5
Johnnie 5

Reputation: 37

How to show a different object from array in my Aurelia HTML?

Afternoon everyone,

New to Aurelia and I'm having some trouble binding a different card to show when I click my link

We are using Aurelia.

This is my html. 

 <div repeat.for="card of cards" class="dilemmacards-detail">  
    <p repeat.for="paragraph of card.textSituation" model.bind="paragraph">${paragraph}</p>
 </div>
<div click.trigger="getRandomCard()">Random card</div>

I've skinned this down for reading purposes of course.

This is being used to fill the cards. 

 public activate(args?: IDilemmaCardsArguments): void {
    const RADIX: number = 10;
    const id: number = parseInt(((args as IDilemmaCardsArguments).id as string), RADIX);
    this.cards = this._dillemaCardManager.getCardsByDeckId(id);
    this.logo = this._dillemaCardManager.getLogoByDeckId(id);

  }

I have a link in the html which generates a random number there getting a different card. 

public getRandomCard()
{
   card = this.cards[Math.floor(Math.random() * this.cards.length)];
  //ToDO perhaps eventually return a different card 
}

My questions:

1. Do I have to refactor this and just have it return a single card (in other words remove the array for example).

2. What is the best way to go about this?

Thanks.

Upvotes: 1

Views: 85

Answers (1)

Johnnie 5
Johnnie 5

Reputation: 37

I decided to remove the array and just use a single card. Works and is less code.

Upvotes: 1

Related Questions