如何为KnockoutJS中combinedCriteria列表新增服务添加高亮闪烁效果

实现方案 #

方案一：基于Knockout自定义绑定实现（推荐，符合MVVM规范，适配性强） #

不需要手动查找DOM元素，通过Knockout的绑定机制自动处理高亮逻辑：

• 第一步：修改checkToPushCriteria函数，给新增的项添加临时标识

function checkToPushCriteria() {
    if (vm.selectedService().Id) {
        vm.combinedCriteria.push({
            service: vm.selectedService() || {},
            isNew: ko.observable(true) // 新增临时高亮标识
        });
        // 原有逻辑不变
        if (vm.combineSchedules() == 1) {
            withSuspendition(employeeIdSubscriber, function () {
                vm.employeeId('');
            });
        }
        vm.selectedService({});
        refreshCurrentDate();
    }
}

• 第二步：添加自定义绑定处理高亮逻辑

ko.bindingHandlers.highlightNew = {
    init: function(element, valueAccessor) {
        const isNew = valueAccessor();
        if (isNew()) {
            // 添加高亮类
            element.classList.add('highlight');
            // 0.5秒后移除高亮和标识
            setTimeout(() => {
                isNew(false);
                element.classList.remove('highlight');
            }, 500);
        }
    }
};

• 第三步：修改combinedCriteria对应的HTML绑定

<!-- ko foreach: combinedCriteria -->
<li data-bind="highlightNew: isNew">
    <!-- 原有内部标签内容保持不变 -->
    <span class="icon-delete" data-bind="click: $parent.deleteCombinedSelection"></span>
    <span data-bind="text: service.Name"></span>
    <span><span class="min emp" data-bind="text: service.Duration, visible: false"></span></span>
</li>
<!-- /ko -->

• 第四步：添加对应的CSS样式

.combine-list-container li {
    transition: background-color 0.5s ease;
}
.combine-list-container li.highlight {
    background-color: #e0e0e0; /* 自定义灰色高亮色值 */
}

方案二：快速实现，直接操作DOM #

如果你不想修改现有绑定逻辑，可以直接查找新增的最后一个元素实现效果：
修改checkToPushCriteria函数，在push数据后添加如下代码：

vm.combinedCriteria.push({
    service: vm.selectedService() || {}
});
// 新增以下代码
setTimeout(() => {
    // 延迟执行等待Knockout完成DOM渲染
    const $newItem = jQuery('.combine-list-container ul li:last');
    $newItem.css('background', '#e0e0e0');
    // 0.5秒后恢复原有样式
    setTimeout(() => {
        $newItem.css('background', '');
    }, 500);
}, 0);

内容的提问来源于stack exchange，提问作者lonelydev101