Flash는 Knockout.js로 텍스트 업데이트 하시겠습니까?</p> <pre><code><h2 data-bind="text: title"></h2> <p data-bind="text: summary"></p> </code></pre> <p>내가 그들의 값이 변경되는 경우 요소가 플래시 할 수있는 간단한/청소 방법이 있나요 :

Question

이 HTML을 감안할 때?

예를 들어 백그라운드에서 웹 요청을 수행하고 매핑 플러그인으로 모델을 업데이트하면 (일부 또는 모든 값을 업데이트 할 수 있음) 목표는 사용자가 실제로 변경 한 요소를 더 명확하게 만드는 것입니다. 텍스트 변경 자체가 너무 빨리 발생하기 때문입니다.

---

나는 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 포장 기준 :

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

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

Complete fiddle

가 어떻게 작동하는지의 (이것은 당신이 어떤 추가 코드를 포함하지 않았기 때문에 그냥 간단한 예입니다) 보자 각각의 요소 (h2 및 p)의 내용이 아니라 with 바인딩을 적용하는 하나의 가상 요소에있는 요소들, 그러나 전체 요소 자체 (즉, 설명 사이에 p 및 h2 태그가 있음)는 래핑하는 가상 요소가 바인딩되는 값이 변경 될 때마다 다시 렌더링됩니다.

정의 된 CSS 애니메이션은 적용되는 요소가 만들어지면 재생되고 애니메이션은 반복되지 않기 때문에 요소의 배경이 원하는 밝은 색상에서 최종 색상으로 희미 해집니다 당신이 선택한 배경. IE가 initial (this link 참조)에 문제가있을 수 있음에 유의하십시오.

편의를 위해 제공 한 코드에 임의성을 추가했습니다.당신은 충분히 클릭함으로써, title의 값 (가능한 숫자를 간단하게하고 싶다)이 0.5보다 작아야하고, summary의 값이 변경되어야합니다.이 경우, 배경색 애니메이션입니다. title >= 0.5이면 summary의 값이 변경되지 않습니다. 따라서 요소가 다시 렌더링되지 않고 애니메이션이 재생되지 않습니다. 실제로는 은이 정확히 동일한 값으로 변경되었습니다. 당신이 동일한 값을 넘기면 녹아웃으로 변화가 일어나지 않습니다).

단점은 $data을 값으로 사용하여 텍스트 내용을 바인딩하기 때문에 바인딩이 조금 더렵다는 것이지만 간단한 시나리오에서만 사용하면 유용 할 수 있습니다.