假设我有一组 3 个单选按钮:
<div>
<label>
<input type="radio" name="Who" value="Myself"
checked="@isMyselfChecked" data-bind="checked: who" />
Mine
</label>
<label>
<input type="radio" name="Who" value="MemberId"
checked="@isMemberIdChecked" data-bind="checked: who" />
I know the member's ID
</label>
<label>
<input type="radio" name="Who" value="MemberUrl"
checked="@isMemberUrlChecked" data-bind="checked: who" />
I know the member's URL
</label>
</div>
当用户选择第一个单选按钮(我的/我自己)时,不需要额外的输入。但是,当选择第二个或第三个时,需要额外的输入:
<div>
<input type="text" name="MemberId" placeholder="Enter Member ID"
data-bind="toggleWho: who()" style="display: none" />
<input type="text" name="MemberUrl" placeholder="Enter Member URL"
data-bind="toggleWho: who()" style="display: none; width: 450px;" />
</div>
只需在相关文本框中添加 data-bind="visible: who() === '[MemberId|MemberUrl]'"
就足够简单了。但是,如果我想添加淡入/淡出过渡该怎么办?
我尝试了来自 knockout 网站的示例自定义fadeVisible
bindingHandler
,并且我了解它是如何工作的。但是,这将同时淡出并淡入文本框。如果选择'MemberId'
单选按钮,并且用户选择'MemberUrl'
单选按钮,我希望MemberId
文本框在之前淡出 MemberUrl
文本框淡入。
下面是我现在所拥有的,它可以工作,但我认为这不是最佳的。还有什么方法可以告诉 knockout 在前一个元素淡出之前不执行淡入?我是否需要另一个 ko.observale
,或者可能需要一个 ko.compulated
?
var viewModel = {
fadeSpeed: 150,
who: ko.observable($('input[type=radio][name=Who]:checked').val())
};
ko.bindingHandlers.toggleWho = {
init: function (element, valueAccessor) {
var value = valueAccessor();
var unwrapped = ko.utils.unwrapObservable(value);
if (unwrapped === element.name)
$(element).show();
},
update: function (element, valueAccessor) {
var value = valueAccessor();
var unwrapped = ko.utils.unwrapObservable(value);
// when selected value is myself, fade out the visible one, if any
if (unwrapped === 'Myself') {
$('input[type=text][name=MemberId]:visible')
.fadeOut(viewModel.fadeSpeed);
$('input[type=text][name=MemberUrl]:visible')
.fadeOut(viewModel.fadeSpeed);
}
// when selected value is memberid, may need to fade out url first
else if (unwrapped === 'MemberId') {
if ($('input[type=text][name=MemberUrl]:visible').length > 0) {
$('input[type=text][name=MemberUrl]:visible')
.fadeOut(viewModel.fadeSpeed, function () {
$('input[type=text][name=MemberId]')
.fadeIn(viewModel.fadeSpeed);
});
} else {
$('input[type=text][name=MemberId]')
.fadeIn(viewModel.fadeSpeed);
}
}
// when selected value is memberurl, may need to fade out id first
else if (unwrapped === 'MemberUrl') {
if ($('input[type=text][name=MemberId]:visible').length > 0) {
$('input[type=text][name=MemberId]:visible')
.fadeOut(viewModel.fadeSpeed, function () {
$('input[type=text][name=MemberUrl]')
.fadeIn(viewModel.fadeSpeed);
});
} else {
$('input[type=text][name=MemberUrl]')
.fadeIn(viewModel.fadeSpeed);
}
}
}
};
ko.applyBindings(viewModel);
最佳答案
您必须对此进行一些调整以适应您的示例,但我需要简化它以在 this fiddle 中进行测试.
这是绑定(bind):
var previousElement = null;
ko.bindingHandlers.fadeSwitcher = {
init: function(element, valueAccessor) {
var value = valueAccessor();
$(element).toggle(ko.utils.unwrapObservable(value));
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (value) {
if (previousElement == null) { // initial fade
$(element).fadeIn();
} else {
$(previousElement).fadeOut('fast', function() {
$(element).fadeIn();
});
}
previousElement = element;
}
}
};
关于jquery - knockout : fade in after fading out something else,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11434265/