使用 knockout.js 将 Flash 新项目添加到 dom 中的数组

Posted 2023-03-27

【中文标题】使用 knockout.js 将 Flash 新项目添加到 dom 中的数组

【英文标题】：Flash new item added to array in dom with knockout.js

【发布时间】：2018-12-17 12:23:49

【问题描述】：

我有一个播放数组，它使用淘汰赛和一个新项目进行更新。无论如何，当添加视觉效果时，是否可以将字体颜色更改为红色并变回白色。我可以使用下面的绑定轻松地对单个属性执行此操作，但是如何在添加到 dom 的新对象上完成此操作。

ko.bindingHandlers.flash = 

    init: function (element, valueAccessor) ,

    update: function (element, valueAccessor) 

        var updated = valueAccessor().updated;

        if (updated()) 
            $(element).addClass('flash');
            setTimeout(function () 
                $(element).removeClass('flash');
            , 1000);

            updated(false);
        
    
;

CSS

.flash 
    color: red;
    -webkit-transition: color 0.4s ease;
    -moz-transition: color 0.4s ease;
    -o-transition: color 0.4s ease;
    transition: color 0.4s ease;

HTML

<div class="accordion-inner period-play-by-play" data-bind="foreach: plays">
                        <div class="play" data-bind="css: 'home-team': $data.IsHomeTeam, 'away-team': !$data.IsHomeTeam, 'modified': $data.isNew">
                            <b data-bind="text: $data.Time + ' '"></b>
                            <span data-bind="text: $data.Team + ' ' + $root.actionName($data.Action)"></span> 
                            <span data-bind="text: $root.actionTypeName($data.ActionType)"></span>
                            <span>by <i data-bind="text: $data.Name"></i></span>
                            <!-- ko if: $data.Lead != '' -->
                            <div class="pull-right" data-bind="text: $data.Lead"></div>
                            <!-- /ko -->
                        </div>
                    </div>

【参考方案1】：

您可以使用afterAdd foreach 绑定来为新添加的元素设置动画。无需创建自定义绑定（如 flash）

更多knockout foreach

var vm = 
  plays: ko.observableArray([
    IsHomeTeam: Math.random() >= 0.5,
    isNew: true,
    Time: new Date().toLocaleString(),
    Team: 'default team',
    Action: 'default action',
    ActionType: 'default action type',
    Name: 'default name',
    Lead: Math.random() >= 0.5
  ]),
  actionName(name) 
    return name;
  ,
  actionTypeName(name) 
    return name;
  ,
  flashAnimate(element) 
    $(element).addClass('flash');
    setTimeout(function() 
      $(element).removeClass('flash');
    , 1000);
  ,
  addNew(vm) 
    vm.plays.push(
      IsHomeTeam: Math.random() >= 0.5,
      isNew: true,
      Time: new Date().toLocaleString(),
      Team: 'new team',
      Action: 'new action',
      Name: 'new name',
      Lead: Math.random() >= 0.5
    );
  
;

ko.applyBindings(vm);

.play 
  -webkit-transition: color 0.4s ease;
  -moz-transition: color 0.4s ease;
  -o-transition: color 0.4s ease;
  transition: color 0.4s ease;
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
  border: 1px solid;


.flash 
  color: red;

<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.4.2/knockout-min.js"></script>
<div class="accordion-inner period-play-by-play" data-bind="foreach:  data: plays, afterAdd: flashAnimate ">
  <div class="play" data-bind="css: 'home-team': $data.IsHomeTeam, 'away-team': !$data.IsHomeTeam, 'modified': $data.isNew">
    <b data-bind="text: $data.Time + ' '"></b>
    <span data-bind="text: $data.Team + ' ' + $root.actionName($data.Action)"></span>
    <span data-bind="text: $root.actionTypeName($data.ActionType)"></span>
    <span>by <i data-bind="text: $data.Name"></i></span>
    <!-- ko if: $data.Lead != '' -->
    <div class="pull-right" data-bind="text: $data.Lead"></div>
    <!-- /ko -->
  </div>
</div>
<button style="margin: 0 10px" data-bind="click: addNew">Add New</button>