녹아웃에서 사용자 정의 바인딩을 만들 수 있습니다.

Question

"fadeInIf"사용자 정의 바인딩을 만들고 싶습니다. http://knockoutjs.com/examples/animatedTransitions.html : 내 생각에서 "fadeVisible"와 같은 뭔가했다

// Here's a custom Knockout binding that makes elements shown/hidden via jQuery's fadeIn()/fadeOut() methods 
// Could be stored in a separate utility library 
ko.bindingHandlers.fadeVisible = { 
    init: function(element, valueAccessor) { 
     // Initially set the element to be instantly visible/hidden depending on the value 
     var value = valueAccessor(); 
     $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable 
    }, 
    update: function(element, valueAccessor) { 
     // Whenever the value subsequently changes, slowly fade the element in or out 
     var value = valueAccessor(); 
     ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut(); 
    } 
}; 

나는 사용자 지정 바인딩에 아주 새로운 해요,하지만이 같은 수 생각은 :

ko.bindingHandlers.fadeInIf = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var value = valueAccessor(); 
     $(element).toggle(ko.utils.unwrapObservable(value)); 

     ko.bindingHandlers.if.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var value = valueAccessor(); 
     if (ko.utils.unwrapObservable(value)) 
      $(element).fadeIn(); 

     ko.bindingHandlers.if.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
    } 
}; 

내가있어 "fadeVisible"이 작동하지만이 작업을 수행 할 수 없습니다. 무엇이 없습니까?

Answer 1

제안 해 주셔서 감사합니다. 마침내 작동했습니다. controlsDescendantBindings 옵션이 누락되었습니다. 결과는 다음과 같습니다.

ko.bindingHandlers.fadeIf = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 

     var value = valueAccessor(); 
     $(element).toggle(ko.utils.unwrapObservable(value)); 

     ko.bindingHandlers['if'].init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
     return { controlsDescendantBindings: value }; 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var value = valueAccessor(); 
     if (ko.utils.unwrapObservable(value)) { 
      ko.bindingHandlers['if'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
      $(element).fadeIn(); 
     } 
     else { 
      $(element).fadeOut(200, function() { 
       ko.bindingHandlers['if'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
      }); 
     } 
    } 
}; 

Answer 2

나는 당신이 99 %에서 제대로됐다고 생각하지만, 페이드 인은 처음부터 끝나지 않을 것이다 ... 나는 그것이 "if"바인딩 핸들러의 작동 방식과 관련이 있다고 생각한다. 내가 무슨 짓을했는지는이를 변경하는 것입니다 :이에

if (ko.utils.unwrapObservable(value)) 
     $(element).fadeIn(); 

: 검사 할 경우

if (ko.utils.unwrapObservable(value)) { 
     $(element).toggle(false); 
     $(element).fadeIn(); 
    } 

내가 일하는 그것의 fiddle을 저장 한.