J'ai donc un nouvel anneau de style de notification et un cercle vert avec des notifications non lues, ce cercle n'est visible que lorsque vous avez de nouvelles notifications. New 1 Notification

Lorsque la page est actualisée même si vous n'avez pas de notification, le cercle est visible pendant une seconde, puis devient invisible

enter image description here

S'il y a encore une nouvelle notification lorsque le cercle actualisé apparaît vide ou avec zéro, puis devient invisible et ensuite avec le bon numéro

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);
    });
};
1
George Krialashvili 20 nov. 2018 à 12:16

3 réponses

Meilleure réponse

Supprimez !important de la propriété d'affichage dans votre CSS et laissez l'affichage de la poignée inline désactivée.

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
Amit Bhoyar 20 nov. 2018 à 20:26

Cela ressemble à des problèmes de chargement. Essayez de déplacer votre css du chargement en haut du HTML, pour le charger dans le bas / pied de page.

Ce que vous voulez faire, c'est masquer le cercle jusqu'à ce que le résultat soit chargé (0 ou 1,2,3,4 .. et ainsi de suite. Selon le nombre de notifications).

Dans votre div, vous avez cette ligne style="display:none"> qui cache le cercle. C'est bon!

Maintenant, vous devez vous assurer que le style pour .unseen-notification-show qui contient display: block !important; qui montre le cercle - ne doit pas être exécuté avant que le calcul du nombre à afficher soit terminé.

Une façon pourrait être de placer le fichier qui charge votre CSS au bas du HTML (comme déplacer votre <link rel="stylesheet" href="test.css" />). Ou une autre façon consiste à utiliser uniquement css pour le masquage, puis à utiliser javascript / jQuery pour afficher le cercle.

Si cela n'a pas aidé, veuillez fournir le code que vous utilisez pour générer le numéro.

1
JonasB 20 nov. 2018 à 12:28

Je pense que le problème est dû à self.UnSeenMessagesCount = ko.observable (0); Ainsi, lorsque votre modal est créé, il est initialisé avec la valeur 0. Ainsi, lorsque vous actualisez la page initialement, il est 0, mais lorsque self.getMessage est appelé, il met à jour votre valeur.

0
vinit_tiwari 20 nov. 2018 à 18:20