aurelia if.bind how to do?

Question

I have a spinner , this spinner should just be showing if the user click in the <a> button element, right now the spinner is showing all the time, can someone help me on this? thank you.

<a class="btn btn-action" href="#/user" bs-tooltip="title.bind: 'user'">
    <i class="fa fa-list-alt" aria-hidden="true"></i>
     <loading-feedback
          is-loading.bind="true"
          message.bind="Loading.."></loading-feedback>
</a>

Answer 1

You can do something like this -

<a class="btn btn-action" href="#/user" bs-tooltip="title.bind: 'user'" click.delegate="handleClick()">
    <i class="fa fa-list-alt" aria-hidden="true"></i>
    <loading-feedback is-loading.bind="loading" message.bind="Loading.."></loading-feedback>
</a>

In the view-model you can do following -

let loading = false;
handleClick() {
    this.loading = true;
}

click.delegate can be used to call some method. And attribute.bind can be used to bind a variable to the attribute. This way you can bind the value of loading to is-loading attribute and call handleClick() to change that value when the anchor is clicked. There seem to be other issues with you code though, if you are binding something to an attribute it has to be a variable not a literal.