Hide alarm warning in bootstrap

Question

Can I declare a dismissal warning only to hide, and not remove myself from the house when I dismiss him?

<div class="alert alert-success alert-dismissible fade in" role="alert" if.bind="message">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong>Success!</strong> ${message}
</div>

The problem is that I am not using jQuery for anything now. I need aurelia to just show / hide it based on flag or existence message.

It works once, but as soon as I fire it, it is deleted from the DOM, so new messages do not appear after it.

Answer 1

Besides if.bind, there is also show.bind(a guide ), or you can bind to a hidden attribute by default using hidden.bind.

, CSS ${!message ? 'hidden': ''}

Answer 2

, , ...

<div class="alert alert-success alert-dismissible fade-in ${dismissed ? 'hidden': ''}" role="alert">
    <button type="button" class="close" click.delegate="dismiss" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    <strong>Success!</strong> ${message}
</div>

js

dismiss() {
    this.dismissed = this.dismissed? true: false;
}

, :)

Answer 3

For my flash container displaying the response message from ajax calls, I installed a listener in the event close.bs.alertand added the remote HTML to the DOM again.

$("#flash-container").on("close.bs.alert","#flash-alert",
/* The container that will hold the #flash-alert. 
 * This setup is neccessary so that the event will be caught
 * when the HTML is added once again.
 */
    function (e) {      
        var $alert = $(this).addClass("d-none");
        /* Remove the existing text */
        $alert.find("#flash-container-text").empty();
        /* e.delegateTarget will be #flash-container */
        e.delegateTarget.innerHTML = $alert[0].outerHTML;       
});