knockout.js एनिमेशन की घोषणात्मक श्रृंखला?

Question

प्रभाव के साथ knockout.js UI को मसाला करने की कोशिश में, मैंने पाया है कि मेरे पास अक्सर कई वर्ग होते हैं जो वैकल्पिक रूप से सशर्त पर आधारित होते हैं। इसका एक उदाहरण सूची दृश्य में एक विवरण फलक हो सकता है जो कोई तत्व चयनित नहीं होने पर निर्देश प्रदर्शित करता है। यह दृश्य बाध्यकारी का उपयोग करके शानदार रूप से काम करता है - लेकिन जब आप मिश्रण में एनिमेशन जोड़ने का प्रयास करते हैं तो यह कम हो जाता है, क्योंकि शो/छुपा एनिमेशन की कोई श्रृंखला नहीं होती है।

मैं एनीमेशन सरल बना दिया है यहाँ उदाहरण knockout.js प्रदर्शित करने के लिए:

http://jsfiddle.net/yq5rS/

मैं शायद कुछ हैक सकता है, मैं इस तरह करने का एक अधिक मुहावरेदार knockout.js रास्ता तलाश कर रहा हूँ चेनिंग का

मैं कुछ समाधान पर विचार किया है:

• कि सशर्त और जो तत्व कब्जा पर में और राज्यों को दिखाने के लिए एक कस्टम बंधन के साथ एक कंटेनर तत्व होने।
• "एनीमेशन दृश्यमान" बाध्यकारी दोनों सशर्त और एक फ़ंक्शन पर निर्भर है जो जांचता है कि अन्य तत्व छिपा हुआ है या नहीं।

संपादित करें: स्पष्ट होने के लिए, मैं चाहता हूं कि एक तत्व दूसरे से फीका होने से पहले फीका हो। धन्यवाद जोश।

Answer 1

यह दृष्टिकोण एक गणना नमूदार बनाता है कि बूलियन नमूदार को लग रहा है जो पाठ प्रदर्शित करने निर्धारण करते हैं।

यहां एक कामकाजी jsfiddle है।http://jsfiddle.net/yq5rS/10/

और यहाँ कोड की एक त्वरित विचार है

एचटीएमएल

<div class='liveExample'> 
    <p> 
     <label> 
      <input type='checkbox' data-bind='checked: display' /> 
      Active? 
     </label> 
    </p> 

    <p data-bind='fadeVisible: IsActive()'></p>  
</div>​ 

स्क्रिप्ट

var Model = function() { 
    var self = this; 
    self.display= ko.observable(false); 
    self.IsActive = ko.computed(function() { 
     if (self.display()) return "Active." 
     return "Not active." 
    }); 
}; 


ko.bindingHandlers.fadeVisible = { 
    init: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn(); 
    }, 
    update: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn(); 
    } 
}; 

ko.applyBindings(new Model());​ 

संपादित

मेरे प्रारंभिक प्रतिक्रिया बाहर फीका नहीं किया, प्रतीक्षा करें, और फिर वापस नहीं हो पाती। यहाँ एक अद्यतन fadeVisible बाध्यकारी हैंडलर

ko.bindingHandlers.fadeVisible = { 
    update: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     $(element).fadeOut('slow', function() { 
      $(element).html(ko.utils.unwrapObservable(value)).fadeIn(); 
     }); 
    } 
}; 

Answer 2

एक दृष्टिकोण है कि आप के लिए काम कर सकते हैं के बजाय एक ही स्थान में दो तत्व प्रदर्शित करने और उन दोनों के बीच टॉगल की है, एक तत्व के साथ चिपके रहते हैं और बाध्यकारी है कि यह fades बाहर एक कस्टम का उपयोग सामग्री स्वैप और फिर इसे fades पीठ में मुझे लगता है कि यह आपके मामूली मामले के लिए jsfiddle से जुड़ा हुआ है।

Ryan Niemeyer's blog और JSFiddle से जुड़ा हुआ एक नज़र डालें। जिस तरह से वह फीका बदलता है, कुल गणना वाले अवलोकन योग्य आपके स्वैपिंग divs उदाहरण पर लागू होता है।

मुझे पता है कि शायद आपके पास दो divs के बीच टॉगल करने की तुलना में अधिक जटिल कार्य हैं ... लेकिन एक सामान्य मामले के समाधान को बढ़ाने का एक तरीका हो सकता है। मैं कोई टेम्पलेट विशेषज्ञ नहीं हूं, लेकिन क्या आपने उनके साथ बहुत काम किया है? dynamically changing templates के लिए विशेष रूप से template { name: function() {} } वाक्यविन्यास?

(मुझे लगता है कि यह आधिकारिक तौर पर मुझे बनाता एक नीमेयेर Fanboy, लेकिन मैं शर्मिंदा :-P नहीं कर रहा हूँ)