twitter-bootstrap - 在引导程序中隐藏可忽略的警报

Question

我可以告诉一个可解雇的警报只隐藏，而不是在解雇时将自己从dom中删除吗？

<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>

问题是我现在没有将 jQuery 用于任何事情。我需要 aurelia 根据标志或message.

它工作一次，但一旦我关闭它，它就会从 DOM 中删除，因此之后不会出现新消息。

Answer 1

除了 if.bind，还有一个show.bind（手动）或者你可以使用 .bind 绑定到默认的隐藏属性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

对于显示来自 ajax 调用的响应消息的 flash 容器，我为close.bs.alert事件设置了一个侦听器，并将已删除的 HTML 再次添加到 DOM。

$("#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;       
});