Question

我想使用自定义绑定处理程序（fadeVisible）来淡化/淡出表单。但我也想使用with绑定处理程序。如果我同时使用它们，则在fadeVisible处理程序可以执行此操作之前，with binding handler set始终显示为none。所以没有淡出效果。这样做的正确方法是什么？

实施例： 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>

小提琴：http://jsfiddle.net/C2Z9f/10/

更多详情：Creating custom bindings that control descendant bindings

Answer 2

您可以从代码中完全消除'with'绑定，并直接将输入绑定到可观察的地址

<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函数中，不是将地址设置为null，而是必须将其设置为空以避免任何绑定错误并实际清除它：

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

Updated Fiddle

如何与fadein / fadeout效果的绑定和自定义可见绑定结合使用？

2 个答案: