Bacon.js將屬性與.and（）結合起來只有在prop === true

Question

我已經選擇了Bacon.js最近做了一些與它的UI，其中我只啓用'註冊'按鈕，如果需求是見面，其中一個是檢查用戶名是否有效。

// 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; 
    }); 

它會返回true或爲什麼用戶名無效。

後來我將所有的結果與此：當有輸入

password.and(username).and(isUsernameValid) 
    .not().assign($(view['signup-submit']), 'toggleClass', 'disabled'); 

的用戶名和密碼是唯一真正的，但由於isUsernameValid總是返回truthy值按鈕最終被錯誤地啓用。

有沒有更好的方法來通過傳遞函數來返回錯誤或組合屬性？

我想宣佈另一個流/屬性返回如果value === true但我試圖避免這一點。

Answer 1

問題是因爲你的真實值包括有效和無效的情況。該函數永遠不會返回錯誤值。如何區分無效和有效的真理和謬誤價值？

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'); 

Answer 2

我會做這樣的：

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') 

這是更好地使每個函數小，分離關注。