CSS 样式在刷新后显示，然后通过 Knockout 消失

Question

所以我有一个新的通知样式环和绿色圆圈，里面有未读通知这个圆圈只有当你有新通知时才可见。

当页面刷新时，即使您没有收到通知，圆圈也会显示一秒钟然后消失

如果在刷新的圆圈显示为空或为零然后不可见并显示正确数字时仍然有新通知

HTML:

<div class="bell">
    <div class="unseen-notification-show" data-bind="visible: UnSeenMessagesCount() > 0, text: UnSeenMessagesCount()" style="display:none"></div>
</div>

CSS:

.unseen-notification-show {
    content: '';
    display: block !important;
    position: absolute;
    top: -10px;
    right: -8px;
    width: 17px;
    height: 17px;
    border: 1px solid #ffffff;
    background-color: #8cdb16;
    border-radius: 8px;
    cursor: pointer;
    z-index: 3;
    color: white;
    text-align: center;
    line-height: 15px;
    font-size: 11px;
    font-family: 'Times New Roman', Times, serif;
}

self.searchModel = new AuthorizedSearchViewModel();
self.Header = ko.observable(new HeaderModel());
self.UnSeenMessagesCount = ko.observable(0);
self.Messages = ko.observableArray();
self.CanShowRemindProfile = ko.observable(false);
self.Remind = ko.observable(new RemindModel());

self.LoadUserInformation = function () {
    $.post('/User/GetUserInfoForDashboardHeader',
        function (response) {
            InitTawkChat(response);
            self.Header(new HeaderModel(response));

            if ($('#accountId').length > 0) {
                $('#accountId').html(response.accountId);
            }

        }, "json").done(function () { console.warn("loaderOff"); });
};

self.GetRemindProfile = function () {
    self.CanShowRemindProfile(false);
    $.post('/User/GetRemindProfile', function (result) {
        if (result) {
            self.CanShowRemindProfile(true);
            self.Remind(new RemindModel(result));
        }
    });
};

self.GetMessages = function () {
    $.post('/Messages/GetAll', {
        page: 1,
        pageSize: 4
    }, function (result) {
        var notifications = [];

        _.map(result.Notifications, function (item) {
            notifications.push(new MessageModel(item));
        });

        self.Messages(notifications);
        self.UnSeenMessagesCount(result.UnseenNotifications);
    });
};

Answer 1

听起来像是一些加载问题。尝试将您的 css 从加载到 HTML 的顶部移动到加载到 bottom/footer.

您想做的是隐藏圆圈直到加载结果（0 或 1,2,3,4.. 等等。取决于通知的数量）。

在您的 div 中，您有这条线 style="display:none"> 隐藏了圆圈。太好了！

现在您应该确保 .unseen-notification-show 的样式包含显示圆圈的 display: block !important; - 在要显示的数字计算完成之前不应该是运行。

一种方法是将加载 css 的文件放在 HTML 的底部（就像移动 <link rel="stylesheet" href="test.css" />）。或者另一种方法是只使用 css 隐藏，然后使用 javascript/jQuery 显示圆圈。

如果这没有帮助 - 那么请提供您用来生成号码的代码。

Answer 2

我认为问题是由于 self.UnSeenMessagesCount = ko.observable(0); 所以当你的模式被创建时，它被初始化为值 0。所以当你最初刷新页面时它是 0 但是当 self.getMessage 被调用时它会更新你的值。

Answer 3

从 css 中的显示属性中删除 !important，并让挖空内联句柄显示。

function viewModel(){
  var self = this;
  self.UnSeenMessagesCount = ko.observable();
  
  self.initData = function(){
    //dummy setTimeout for your ajax get.
    setTimeout(function(){ 
      self.UnSeenMessagesCount(4);
   },1000);
  }
  
}

var vm = new viewModel();
vm.initData();

ko.applyBindings(vm);

.unseen-notification-show {
    content: '';
    display: block;
    position: absolute;
     
    width: 17px;
    height: 17px;
    border: 1px solid #ffffff;
    background-color: #8cdb16;
    border-radius: 8px;
    cursor: pointer;
    z-index: 3;
    color: white;
    text-align: center;
    line-height: 15px;
    font-size: 11px;
    font-family: 'Times New Roman', Times, serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="bell">
    <div class="unseen-notification-show" data-bind="visible: UnSeenMessagesCount() > 0, text: UnSeenMessagesCount()" style="display:none"></div>
</div>

CSS 样式在刷新后显示，然后通过 Knockout 消失

CSS style shows after refresh and then goes invisible with Knockout

html

javascript

css

knockout.js