将类添加到Knockout组件

Add Class to Knockout Component

本文关键字：Knockout 组件 添加      更新时间：2023-09-26

我正在尝试创建一个knockout组件，它将在屏幕底部显示通知。这目前工作得很好，但我打算能够添加更多的动画通知。理想情况下，我想做的是有通知立即开始褪色超过5秒。5秒后，它将从通知数组中删除，因此元素将被删除。但是，如果用户将鼠标放在通知上，则淡出序列应该完全停止。但是，目前我不知道如何以这种方式访问通知的dom元素。谁能推荐一个解决方案?

<

HTML绑定/strong> 

<div class="notification-container" data-bind="foreach: notificationArray">
    <notification params="data: $data"></notification>
</div>

通知JS 

appViewModel.notificationArray = ko.observableArray([]);
appViewModel.setNotification = function( message ){
    appViewModel.notificationArray.push({
        'message':message
    })
};

组件JS 

ko.components.register('notification', {
    viewModel: function(params) {
        var data = params.data;
        this.message = data.message || null;
        this.timer = null;
        this.removeNotification = function() {
            appViewModel.notificationArray.remove(data);
        };
        this.timer =  ( function(self) {
            return setTimeout(function() {
                self.removeNotification();
            }, 5000);
        })(this);
        this.hover = function () {
            clearTimeout(this.timer);
        };
        this.restart = function() {
            this.timer = ( function(self) {
                return setTimeout(function() {
                    self.removeNotification();
                }, 5000);
            })(this);
        }
    },
    template: '<div class="notification show-notification" data-bind="event: { mouseover: hover, fastClick: hover, mouseout: restart }">'
        +'<div class="notifications-close clickable right" data-bind="fastClick: removeNotification"><span class="icon icon-x"></span></div>'
        +'<div class="notification-text" data-bind="html: message"></div>'
        +'</div>'
});

——更新显示完成代码——

完成代码的最终结果是通知现在将从屏幕跳出来，并立即开始在5秒内消失。如果点击通知，将停止淡出/从数组中移除(由于移动支持，我删除了鼠标悬停事件)。希望这对其他人有帮助。

HTML绑定 -同上

通知JS -同上

自定义衰落绑定

ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor) {
        $(element).height();    //need to trigger re-paint in order for transition to fire
        $(element).addClass('show-notification');
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        $(element).stop();
        ko.unwrap(value) ? $(element).fadeIn(0) : $(element).fadeOut(5000);
    }
};

更新组件JS

ko.components.register('notification', {
    viewModel: function(params) {
        var data = params.data;
        this.message = data.message || null;
        this.timer = null;
        **this.paused = ko.observable(false);**
        this.removeNotification = function() {
            appViewModel.notificationArray.remove(data);
        };
        this.timer =  ( function(self) {
            return setTimeout(function() {
                self.removeNotification();
            }, 5000);
        })(this);
        this.pause = function () {
            **this.paused(true);**
            clearTimeout(this.timer);
        };
    },
    template: '<div class="notification clickable" data-bind="fadeVisible: paused, fastClick: pause">'
        +'<div class="notifications-close clickable right" data-bind="fastClick: removeNotification"><span class="icon icon-x"></span></div>'
        +'<div class="notification-text" data-bind="html: message"></div>'
        +'</div>'
});
有关CSS

.notification {
    visibility: hidden;
    max-height: 5.5rem;
    overflow: hidden;
    margin: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid rgb(72, 72, 72);
    background: white;
    box-shadow: -5px 5px 15px -3px rgba(0,0,0,0.75);
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 1.20, 0, 1.20);
    transition: -webkit-transform 0.3s cubic-bezier(0, 1.20, 0, 1.20),transform 0.3s cubic-bezier(0, 1.20, 0, 1.20);
}
.show-notification {
    visibility: visible;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

您需要一个自定义绑定处理程序来处理褪色。如果你愿意，你也可以处理从绑定处理程序中删除，但我不能决定这是否是个好主意。

ko.components.register('notification', {
  viewModel: function(params) {
    var self = this;
    var data = params.data;
    this.message = data.message || null;
    var timer = null;
    this.removeNotification = function() {
      appViewModel.notificationArray.remove(data);
    };
    this.hover = function() {
      clearTimeout(timer);
    };
    this.restart = function() {
      timer = setTimeout(function() {
        self.removeNotification();
      }, 5000);
    }
    this.restart();
  },
  template: '<div class="notification show-notification" data-bind="event: { mouseover: hover, fastClick: hover, mouseout: restart }, fadeOut:true">' + '<div class="notifications-close clickable right" data-bind="fastClick: removeNotification"><span class="icon icon-x"></span></div>' + '<div class="notification-text" data-bind="html: message"></div>' + '</div>'
});
ko.bindingHandlers.fadeOut = {
  init: function(el) {
    $(el).fadeOut(5000);
    $(el).hover(function() {
        $(el).stop().fadeIn(0);
      },
      function() {
        $(el).fadeOut(5000);
      });
  }
}
appViewModel = {};
appViewModel.notificationArray = ko.observableArray([{
  message: 'Hi there'
}]);
appViewModel.setNotification = function(message) {
  appViewModel.notificationArray.push({
    'message': message
  })
};
ko.applyBindings(appViewModel);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="notification-container" data-bind="foreach: notificationArray">
  <notification params="data: $data"></notification>
</div>

相关文章：