javascript - 使用 Knockout.js 更新文本时闪烁？

Question

给定这个 HTML:

<h2 data-bind="text: title"></h2>

<p data-bind="text: summary"></p>

如果元素的值发生变化，是否有一种简单/干净的方法可以使元素闪烁？

例如，如果我在后台执行 Web 请求并使用映射插件更新模型(它可能会更新所有值、部分值或不更新任何值)。目标是让用户更清楚哪些元素确实发生了变化，因为仅文本变化本身就发生得如此之快。

---

我正在考虑某种带有 handler(element, oldValue, newValue) 的 data-bind="afterValueChanged"，或者类似的东西。所以我可以这样做:

<div data-bind="afterValueChanged: myHandler">
    ...

然后以某种方式在该函数中应用 flash 动画......或其他......一直在尝试谷歌，但只找到与输入值更改等相关的答案，在我的情况下不一定有任何输入完全没有。

Answer 1

只是使用了一个自定义绑定(bind)，它先淡出然后淡入。更改文本框中的值并点击标签。

ko.bindingHandlers.flashingtext = {
  update: function(element, valueAccessor, allBindings) {
    // First get the latest data that we're bound to
    var value = valueAccessor();
    var valueUnwrapped = ko.unwrap(value);
    // Now manipulate the DOM element
    $(element).text(valueUnwrapped);
    $(element).fadeOut("slow", function() {
      $(element).fadeIn("slow", function() {});
    });
  }
};

function model() {
  var self = this;
  this.title = ko.observable('my title');
}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);

});

<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>

<h2 data-bind="flashingtext: title"></h2>
change the title: <input type="text" data-bind="value: title">