CODEWITHSUNDEEP
aurelia
software_writer
software_writer

Reputation: 4468

Aurelia class.bind does not trigger function

I have an Aurelia View as follows:

<li repeat.for="pageNumber of numOfPages">
   <a class.bind="isCurrentPage(pageNumber) ? 'blueBackground' :''" click.delegate="pageClicked(pageNumber)">
      ${pageNumber}
   </a>
</li>

and the model as follows:

pageClicked(pageNumber: number) {
    this.currentPage = pageNumber;
}


isCurrentPage(pageNumber: number) {
    return this.currentPage === pageNumber;
}

It works only for the first a element and adds the bluBackground class for it. But when I click on any other a element, it doesn't fire the isCurrentPage method, so the class is not updated.

However, when I replace the condition as follows:

<li repeat.for="pageNumber of numOfPages">
    <a class="page-link" class.bind="pageNumber === currentPage ? 'blueBackground' : ''" click.delegate="pageClicked(pageNumber)">
    ${pageNumber}
    </a>
</li>

It works fine and blueBackground class is added on each a which was clicked.

My question is, what's the difference in executing a code in class.bind like

  1. isCurrentPage(pageNumber) and

  2. pageNumber === currentPage

    and why is the function isCurrentPage(pageNumber) not called every time in the first case? Thanks.

Upvotes: 2

Views: 755

Answers (1)

Kelly Ethridge
Kelly Ethridge

Reputation: 1668

I'm going to guess that in the first example since pageNumber never changes, it doesn't cause the binding to update, however, in the second example, when you click it sets currentPage equal to pageNumber. Changing currentPage causes the binding to update.

Upvotes: 3

Related Questions