2013-06-06 34 views
5

Ayrıca DIV'nin CSS ve HTML'yi 2 gözlenebilir üzerinden ayarlayarak, bir alıcı DIO'yu özel bağlantı kullanarak göstermeye çalışıyorum.KnockoutJS özel bağlama ateşi birden çok kez

sorun Ben bu 2 gözlenebilirlerin değerini değiştirdiğinizde, aynı zamanda nedense yanı bağlayıcı özel ateşler olmasıdır.

Şablon:

<div class="alert top-alert" data-bind="fade: topMessageShow, css: topMessageType, html: topMessage"></div> 

Özel Handler:

ko.bindingHandlers.fade = { 
    update: function resolveFade(element, valueAccessor, allBindingsAccessor) { 
    if (ko.utils.unwrapObservable(valueAccessor())) { 
     $(element).hide().delay(300).fadeIn('slow'); 
    } else { 
     // fade out the notification and reset it 
     $(element).fadeOut('slow', function() { 
     // reset those 2 observables that set class and HTML of the notification DIV 
     MyClass.topMessageType(''); 
     MyClass.topMessage(''); 
     }); 
    } 
    } 
}; 

Tetikleme Kodu:

MyClass.topMessageType('alert-info'); 
MyClass.topMessage(msg); 
MyClass.topMessageShow(true); 

JSFiddle:http://jsfiddle.net/UrxXF/1/

+0

Ben * düşünüyorum * senin sorunun diğer bağlamaları gözlenebilir. Hepsi "allBindingsAccessor" un bir parçası haline gelir ve onları değiştirir * bağlamanızın yeniden değerlendirilmesini gerektirebilir, bu yüzden tekrar nakavt tekrar çağırır. Sorunu çözmek için, içeri girip çıkmadan önce öğenin görünürlüğünü ve/veya animasyon durumunu kontrol edebilirsiniz. –

cevap

3

Bu, tüm bağlamaları tek bir unsur üzerinde birlikte ateş gerçeği ile ilgilidir. İşte şu anki davranışı açıklayan bir gönderi: http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html. Bu aslında bağlanmaların bağımsız olarak bir eleman üzerinde tutulduğu KO 3.0'da değişiyor. Bu teknikle Eğer update fonksiyonunu taklit, ancak bağımsız hareket izin veriyorsunuz ile

ko.bindingHandlers.fade = { 
    init: function resolveFade(element, valueAccessor, allBindingsAccessor) { 
     ko.computed({ 
     read: function() { 
      /your logic goes here 
     }, 
     disposeWhenNodeIsRemoved: element 
     }); 
    } 
}; 

: şimdilik kullanabilirsiniz

Bir seçim gibi init işlevinde kendi computed kurmaktır eleman üzerindeki diğer bağlamalar. Tek küçük dezavantajı, şu anda bağlayıcı dizgede sarılmış olan gözlenebilirlerden (fade: topMessageShow()fade: topMessageShow yerine) herhangi bir bağımlılık almamanızdır.

+0

Bu hile yapmak gibi görünüyor, teşekkür ederim! KO 3.0 ne zaman çıkması gerektiği hakkında herhangi bir bilgi var mı? –

+0

Bir sonraki ayda bir KO 2,3 sürümü ile birlikte bir beta almalıyız. –

+0

mükemmel haber, teşekkürler :) –

İlgili konular