Knockout.jsを使用したFlashのテキスト更新ですか？

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

そしてどういうわけか、その関数でフラッシュアニメーションを適用する...か何か...グーグルしようとしているが、唯一の入力値と、そのようなの変更に関連した答えを見つけて、中にされてし私の場合、必ずしも入力が全くないわけではありません。

Answer 1

フェードアウトの後にフェードインするカスタムバインディングを使用しました。テキストボックスとヒットタブの値を変更してください。

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

Answer 2

あなたはwithのような結合を使用して仮想要素を悪用されて使用することができ、簡単なトリック：

HTML：

<!-- ko with: title --> 
<h2 data-bind="text: $data"></h2> 
<!-- /ko --> 

<!-- ko with: summary --> 
<h2 data-bind="text: $data"></h2> 
<!-- /ko --> 

<button type="button" data-bind="click: change"> 
    Change 
</button> 

JS：

function viewModel() { 
    var self = this; 

    this.title = ko.observable('0'); 
    this.summary = ko.observable('0'); 

    this.change = function() { 
    self.title(Math.random().toString()); 

    if (self.title() < 0.5) { 
     self.summary(Math.random().toString()); 
    } else { 
     self.summary(self.summary()); 
    } 
    } 
}; 

var vm = new viewModel(); 

ko.applyBindings(vm); 

CSS：

h2, p { 
    animation: bg 1s backwards; 
} 

@keyframes bg { 
    0% { 
    background: #00ff40; 
    } 
    100% { 
    background: initial; 
    } 
} 

Complete fiddle

のは、（これはあなたが任意の追加コードが含まれていなかったので、ただ単純化した例である）、それがどのように動作するかを見てみましょう：h2をラップすることにより、

とpそれぞれの要素（h2とp）の内容ではなく、withバインディングを適用する1つ1つの仮想要素の要素ですが、要素全体ラッピングしている仮想要素がバインドされている値が変更されるたびに、コメントの間にあるpとh2のタグが再レンダリングされます。

定義されたCSSアニメーションは、適用される要素が取得（再作成）されるとすぐに再生されるため、アニメーションが繰り返されないため、要素の背景が好きな明るい色から最終あなたの選択の背景。 （this linkを参照してください）。

あなたの便宜のため、私が提供したコードにいくつかのランダム性を追加しました。十分にクリックすると、titleの値を0.5より小さくする必要があります（できるだけシンプルにしたいと考えています）。summaryの値が変更されます。この場合、背景色アニメ化されています。 title >= 0.5の場合、summaryの値は変更されないため、要素は再レンダリングされず、アニメーションは再生されません（実際にははと全く同じ値に変更されています。同じ値になった場合、ノックアウトで変更は発生しません）。

$dataを値として使用してテキストコンテンツをバインドしているため、バインディングが少し汚れているという欠点がありますが、シンプルなシナリオでのみ使用すると便利な時間節約になる可能性があります。