녹아웃 3.2 - AMD로드 된 구성 요소 간의 'if'기반 전환

Question

동적으로로드되는 녹아웃 구성 요소를 사용하는 SPA가 있습니다. 여기

는 현재

 <!-- ko if: state() === 'one' --> 
     <component-one></component-one> 
     <!-- /ko --> 

     <!-- ko if: state() === 'two' --> 
     <component-two></component-two> 
     <!-- /ko --> 

     <!-- ko if: state() === 'three' --> 
     <component-three params="myParam: MyParam()"></component-three> 
     <!-- /ko --> 

     <!-- ko if: state() === 'four' --> 
     <component-four></component-four> 
     <!-- /ko --> 

모습입니다 내가 찾고 가상 요소 바인딩 if와 동일한 결과를 생성 뭔가뿐만 아니라,/나를 전환 (페이드 배치 할 수 있습니다 아웃).

나는 녹아웃 2.1에서는 작동하지만 3.2에서는 작동하지 않는 것으로 보이는 http://jsfiddle.net/rniemeyer/kNtdu/과 같은 것을 발견했습니다.

참고 : fadeVisible은 아니지만 fadeIf 줄을 더 많이 찾습니다.

도움 주셔서 감사합니다.

Answer 1

다음은 바인딩을 한 것입니다. 행동

ko.bindingHandlers.ifFading = { 
    init: function(element, valueAccessor, ignored1, ignored2, bindingContext) { 
     var template = $(ko.virtualElements.childNodes(element)).filter("*").clone(), 
      lastValue = false; 
     ko.virtualElements.emptyNode(element); 

     ko.computed(function() { 
      var dataValue = !!ko.unwrap(valueAccessor()); 
      if (dataValue !== lastValue) { 
       lastValue = dataValue; 
       if (dataValue) { 
        var templateClone = template.clone(); 
        ko.virtualElements.setDomNodeChildren(element, templateClone); 
        templateClone.hide(); 
        ko.applyBindingsToDescendants(bindingContext, element); 
        templateClone.fadeIn(); 
       } else { 
        $(ko.virtualElements.childNodes(element)).fadeOut(function() { 
         ko.virtualElements.emptyNode(element); 
        }); 
       } 
      } 
     }, null, { disposeWhenNodeIsRemoved: element }); 

     return { controlsDescendantBindings: true }; 
    } 
}; 
ko.virtualElements.allowedBindings.ifFading = true; 

: http://jsfiddle.net/mbest/6tpn5uhy/1/