CSS 样式在刷新后显示，然后在 Knockout 中不可见

Posted 2023-03-27

【中文标题】CSS 样式在刷新后显示，然后在 Knockout 中不可见

【英文标题】：CSS style shows after refresh and then goes invisible with Knockout

【发布时间】：2019-04-22 16:51:43

【问题描述】：

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

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

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

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

【问题讨论】：

尝试使用 position:relative;

【参考方案1】：

从您的 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>

【参考方案2】：

听起来像是一些加载问题。尝试将您的 css 从加载到 HTML 的顶部移动到加载到底部/页脚中。

您想要做的是隐藏圆圈，直到加载结果（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 显示圆圈。

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

【讨论】：

我试图让 div 先不显示，然后用 data-bind css 让它可见，但问题是圆圈有效，但我有数据绑定文本的数字和数字显示 0 像空圆圈一样显示，没有样式，然后消失，然后显示 normali。所以我认为问题在于数据绑定数据绑定和样式加载比找到看不见的通知编号的代码更快

如果从data-bind 中删除visible: UnSeenMessagesCount() > 0, 并将css 移到页脚会发生什么？

如果我删除可见，它将保持显示状态

好的。那我没有解决办法:(

【参考方案3】：

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