Bacon.js 仅当 prop === true 时才将属性与 .and() 组合
Bacon.js combine properties with .and() only if prop === true
我最近选择了 Bacon.js 并用它做了一些 UI,如果满足要求,我只启用一个 'Sign up' 按钮,其中之一是检查用户名有效。
// Returns true or string with invalid reason
var isUsernameValid = username
.map(function(value) {
if(value.length < 4) {
return 'Must be 4 characters at least';
}
if(!config.patterns['username'].test(value)) {
return 'Can only have letters, numbers, periods, or underscores';
}
return true;
});
它 return 正确或用户名无效的原因。
稍后我将所有结果与此结合起来:
password.and(username).and(isUsernameValid)
.not().assign($(view['signup-submit']), 'toggleClass', 'disabled');
用户名和密码仅在输入时为真,但由于 isUsernameValid
始终 return 是一个 真实 值,因此按钮最终被错误启用。
是否有更好的方法来 return 错误或通过传递函数组合属性?
如果 value === true
,我曾考虑将另一个 stream/property 声明为 return,但我正在努力避免这种情况。
我会这样做:
var isUsernameLongEnough = username.map(function(value) {
return value.length >= 4
})
var usernameHasCorrectCharacters = username.map(function(value) {
return config.patterns['username'].test(value)
})
var isUsernameValid = isUsernameLongEnough.and(usernameHasCorrectCharacters)
password.and(username).and(isUsernameValid)
.not().assign($(view['signup-submit']), 'toggleClass', 'disabled')
isUsernameLongEnough.not().assign($(view['error-too-short']), 'toggle')
usernameHasCorrectCharacters.not().assign($(view['error-invalid-characters']), 'toggle')
最好让每个函数都小一些,并将关注点分开。
问题是因为您的真值包括有效和无效情况。该函数从不 returns 虚假值。如何将无效和有效分成真值和假值?
var isUsernameInvalid = username
.map(function(value) {
if(value.length < 4) {
return 'Must be 4 characters at least';
}
if(!config.patterns['username'].test(value)) {
return 'Can only have letters, numbers, periods, or underscores';
}
return false;
});
然后,对原来的代码没有太大改动
password.and(username).and(isUsernameInvalid.not())
.not().assign($(view['signup-submit']), 'toggleClass', 'disabled');
我最近选择了 Bacon.js 并用它做了一些 UI,如果满足要求,我只启用一个 'Sign up' 按钮,其中之一是检查用户名有效。
// Returns true or string with invalid reason
var isUsernameValid = username
.map(function(value) {
if(value.length < 4) {
return 'Must be 4 characters at least';
}
if(!config.patterns['username'].test(value)) {
return 'Can only have letters, numbers, periods, or underscores';
}
return true;
});
它 return 正确或用户名无效的原因。
稍后我将所有结果与此结合起来:
password.and(username).and(isUsernameValid)
.not().assign($(view['signup-submit']), 'toggleClass', 'disabled');
用户名和密码仅在输入时为真,但由于 isUsernameValid
始终 return 是一个 真实 值,因此按钮最终被错误启用。
是否有更好的方法来 return 错误或通过传递函数组合属性?
如果 value === true
,我曾考虑将另一个 stream/property 声明为 return,但我正在努力避免这种情况。
我会这样做:
var isUsernameLongEnough = username.map(function(value) {
return value.length >= 4
})
var usernameHasCorrectCharacters = username.map(function(value) {
return config.patterns['username'].test(value)
})
var isUsernameValid = isUsernameLongEnough.and(usernameHasCorrectCharacters)
password.and(username).and(isUsernameValid)
.not().assign($(view['signup-submit']), 'toggleClass', 'disabled')
isUsernameLongEnough.not().assign($(view['error-too-short']), 'toggle')
usernameHasCorrectCharacters.not().assign($(view['error-invalid-characters']), 'toggle')
最好让每个函数都小一些,并将关注点分开。
问题是因为您的真值包括有效和无效情况。该函数从不 returns 虚假值。如何将无效和有效分成真值和假值?
var isUsernameInvalid = username
.map(function(value) {
if(value.length < 4) {
return 'Must be 4 characters at least';
}
if(!config.patterns['username'].test(value)) {
return 'Can only have letters, numbers, periods, or underscores';
}
return false;
});
然后,对原来的代码没有太大改动
password.and(username).and(isUsernameInvalid.not())
.not().assign($(view['signup-submit']), 'toggleClass', 'disabled');