Как я могу объединить с привязкой и настраиваемой видимой привязкой для эффектов fadein/fadeout?

Question

Я хочу использовать собственный обработчик привязки (fadeVisible) для fadein/fadeout для форм. Но я также хочу использовать обработчик привязки. Если я использую оба вместе, набор обработчиков привязки всегда отображается равным none, прежде чем обработчик fadeVisible сможет это сделать. Таким образом, эффект затухания отсутствует. Каков правильный способ сделать это?

Пример: jsfiddle

<form data-bind="with:address, fadeVisible:address"> 

Answer 1

Вы можете эмулировать with обвязки установки address в качестве внутреннего связывания контекста элемента. Вот обновлённый связывание называется fadeVisibleWith ...

ko.bindingHandlers.fadeVisibleWith = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var value = valueAccessor(); 
     $(element).hide(); 

     var innerBindingContext = bindingContext.extend(value); 
     ko.applyBindingsToDescendants(innerBindingContext, element); 
     return { controlsDescendantBindings: true }; 
    }, 
    update: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     ko.unwrap(value) ? $(element).fadeIn() : $(element).fadeOut(); 
    } 
}; 

И изменить связывание с точки зрения ...

<form data-bind="fadeVisibleWith:address"> 
    <p> 
     <label>firstname</label> 
     <input data-bind="value:firstName"/> 
    </p> 
    <p> 
     <label>lastname</label> 
     <input data-bind="value:lastName"/> 
    </p> 
</form>  

Fiddle: http://jsfiddle.net/C2Z9f/10/

Подробнее: Creating custom bindings that control descendant bindings

Answer 2

Вы можете устранить «с» связывания полностью из кода и непосредственно связывать свои входы с адресом наблюдаемой

<form data-bind="fadeVisible:address"> 
<p> 
    <label>firstname</label> 
    <input data-bind="value:address().firstName"/> 
</p> 
<p> 
    <label>lastname</label> 
    <input data-bind="value:address().lastName"/> 
</p> 
</form> 

и самое главное, в ваша четкая функция, а не установка адреса в нуль, вы должны установить его на пустое, чтобы избежать ошибок привязки и фактически очистить его:

clear:function() { 
    this.address(''); 
}, 

Updated Fiddle