javascript - 刷新后显示 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 中的显示属性中删除 !important 并让 knockout 内联句柄显示。

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>