CODEWITHSUNDEEP
htmlaurelia
8protons
8protons

Reputation: 3959

disabled.bind not changing after DOM load

Below is the HTML snippet for a button that I would like to be disabled while no files, from a UI list of files, are selected:

<button id="downloadButton" disabled.bind="selectedFileCount() == 0" click.trigger="downloadFiles()" type="button">Download Selected</button>

The conditional function for whether the button is disabled or not:

selectedObjects = [];
selectedFileCount() {
    return this.selectedObjects.length;
}

When a file is selected, the following is triggered:

rowSelected($event) {
    this.selectedObjects.push($event.detail.row);
}

I know that rowSelected works properly as I can console.log(selectedObjects.length) and get the correct length. I know that selectedFileCount() works because I can return boolean values which are reflected in whether the button is disabled or not.

It appears that once disabled.bind is set on DOM load, it cannot be changed. Is this assumption correct? What should I do?

Upvotes: 0

Views: 324

Answers (1)

Ashley Grant
Ashley Grant

Reputation: 10887

Aurelia treats any function calls in a binding as being pure function calls. Since your selectedFileCount function doesn't take any parameters, this means that Aurelia assumes the output value of the function will never change. That is why your disabled binding never changes.

My recommendation for how to fix it is to simply put the check in the binding.

 <button id="downloadButton" disabled.bind="selectedObjects.length == 0" 
         click.trigger="downloadFiles()" type="button">
    Download Selected
 </button>

Upvotes: 1

Related Questions