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

我有一个逐场播放的数组，使用淘汰和一个新项目进行更新。在添加字体以获得视觉效果时，是否需要将字体的颜色更改为红色，然后再更改为白色。通过下面的绑定，我可以轻松地在单个属性上实现这一点，但是如何在添加到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>

通过

您可以使用

afterAdd

foreach绑定为新添加的元素设置动画。无需创建自定义绑定（如flash）

更多

var-vm={
剧目：柯·阿雷([{
iSometeam:Math.random（）>=0.5，
是的，
时间：新日期（）.ToLocalString（），
团队：“默认团队”，
操作：“默认操作”，
ActionType:“默认操作类型”，
名称：“默认名称”，
Lead:Math.random（）>=0.5
}]),
actionName（名称）{
返回名称；
},
actionTypeName（名称）{
返回名称；
},
flashAnimate（元素）{
$（元素）.addClass（'flash'）；
setTimeout（函数（）{
$（element.removeClass（'flash'）；
}, 1000);
},
addNew（虚拟机）{
vm.plays.push({
iSometeam:Math.random（）>=0.5，
是的，
时间：新日期（）.ToLocalString（），
团队：“新团队”，
行动：“新行动”，
名称：'新名称'，
Lead:Math.random（）>=0.5
});
}
};
ko.应用绑定（vm）
。播放{
-webkit过渡：颜色0.4s轻松；
-moz过渡：颜色0.4s轻松；
-o型过渡：颜色0.4s；
过渡：颜色0.4s；
显示器：flex；
弯曲方向：立柱；
利润率：10px；
填充：10px；
边框：1px实心；
}
.闪光{
颜色：红色；
}

通过
添加新的