Question

我对编码世界还很陌生，所以我提前道歉！单击“保存”按钮后，我试图显示“警告”。我意识到问题可能也在javascript代码中。目前，我只在呈现页面时看到绿色警报块。我希望只在按下保存按钮后显示，并在几秒钟后淡出我的JS代码如下所示：

        save: function () {
        var that = this;
        that.paymentTypes.commit();
        that.originalData.Values = that.paymentTypes();

        http.put(that.url, that.originalData).then(function (response) {
            if (response.Id) {
                //that.message('Saved!');
                $(".alert").alert('Saved!');
                $(".alert").alert('close.fade');
            }
        });
    }

我的HTML看起来像：

<h3 data-bind="text: displayName"></h3>

<div data-bind="text: message" class="alert alert-block alert-success fade in " />

<form>
<input type="button" value="Add New" class="btn btn-success" data-bind="click: add" />
<input type="button" value="Save Changes" class="btn btn-primary" data-bind="click: save" />
<input type="button" value="Undo Changes" class="btn" data-bind="click: paymentTypes.undo" />

<table id="paymentTypesTable" class="table table-striped editable">
    <thead>
        <tr>
            <th>Payment Type Code</th>
            <th>Payment Type Name</th>
            <th>Description</th>
            <th>Is Active</th>
        </tr>
    </thead>
    <tbody data-bind="template: { name: paymentTypes.displayMode, foreach: paymentTypes }"></tbody>
</table>
</form>

谢谢!!!!

Answer 1

根据data-bind属性，我猜你正在使用淘汰赛。您有几个选项可以尝试获得您想要的功能。第一种是使用带有knockout observableArray的模板，并使用setTimeout在一段时间后从数组中删除警报。

小提琴：http://jsfiddle.net/d2UnH/

<div data-bind="template: {name: 'alert-template', foreach: alerts}"></div>
<script type="text/html" id="alert-template">
    <div data-bind="text: $data" class="alert alert-block alert-success fade in" ></div>
</script>

您还可以选择在需要时手动将警报添加到DOM，并调用.alert（'close'）将其删除。

Twitter Bootstrap淡出警告

1 个答案: