培根格式的可选字段
Optional fields in baconjs form
我正在培根中构建可定制的表单.js。我对可能为空的可选字段有问题,例如电话有时是必需的,有时是可选的。
field_events = _.merge(
_.mapValues(@form, @_build_field_streams), dynamic_field_events
)
valid_streams = _.pluck(_.values(field_events), 0)
all_invalid = Bacon.all(valid_streams).not().toProperty()
data_prop = Bacon.combineTemplate(
_.mapValues(field_events, ([is_valid, value_stream]) -> value_stream)
)
submit_stream = @$el
.asEventStream('click', @submit_selector)
.doAction(".preventDefault")
.alwaysSkipWhile(all_invalid)
@actions = Bacon.when(
[data_prop, submit_stream],
(data) -> {action: 'submit', param: data}
)
data_prop是延迟评估的,因此如果电话流没有任何值,我们将不会提交表单。有没有办法给流一个默认值或过滤combineTemplate
中的空流?
其余代码:
_build_field_streams: ({selector, validator}, field) =>
value_stream = Bacon.mergeAll(
@_get_field_change_streams(selector)
).map((e) ->
$(e.currentTarget).val()
)
if _.isString validator
validator = exports.validators[validator]()
# optional field are valid by default and for empty values
is_optional_field = field not in @mandatory_field
curr_validator = validator || @noop_validator
validator_fun = (x) -> if is_optional_field and not x
return true
else
return curr_validator(x)
validator_stream = value_stream.map(validator_fun)
is_valid = validator_stream.map(_.isEmpty).toProperty(is_optional_field).log('field')
[ok_events, bad_events] = validator_stream.split(_.isEmpty)
bad_events = bad_events.debounce(@invalid_delay)
defocus = @$el.asEventStream('blur', selector)
# TODO: Might be good to instantly go bad _if_ it was already valid.
Bacon.when(
[ok_events], true
[is_valid, bad_events], ((valid) -> valid),
[is_valid, defocus], ((valid) -> valid)
).onValue( (valid) =>
if valid
@render_field_valid(selector)
else
@render_field_invalid(selector)
)
return [is_valid, value_stream]
_get_field_change_streams: (selector) ->
# Hopefully these 2 cover most things. Can always add more if we need.
return _.map ['change', 'keyup'], (handler) =>
@$el.asEventStream(handler, selector)
使用当前代码,我必须在每个输入中键入一些内容。我的理解是Bacon.when( [data_prop, submit_stream]
如果data_prop
是非空属性并且我们收到submit_stream
事件,则会触发。为什么不评估data_prop
?我相信Bacon.combineTemplate
不会创建一个有价值的属性,除非所有value_stream
都有一个事件。
我将流转换为具有默认值的道具
data_prop = Bacon.combineTemplate(
_.mapValues(field_events, ([is_valid, value_stream]) -> value_stream.toProperty(''))
)
相关文章:
- 时间字段上的JavaScript验证(不接受0:00格式)
- 将画布另存为 jpeg 格式,并通过 js 将输入字段保存到数据库
- Angular-UI 日期选择器不允许在输入字段中输入格式 dd.MM.yyyy
- 日期范围选取器输入字段不是 24 小时格式
- 如何在设置为日期选取器输入字段之前设置日期值的格式
- 添加动态字段以创建特定的 JSON 格式
- j查询输入字段格式为 XX-XX-XX
- 如何使用 Angular “数字”过滤器键入时在输入字段中设置带有千和小数分隔符的字符串格式
- 日期选取器和日期字段中的日期格式(YYYY-MM-DD)
- JSON 格式为 2 个字段
- 培根格式的可选字段
- 使用逗号和小数设置金额字段的格式
- 如何将字段数据从一种格式更改为另一种格式
- 如何为输入字段指定格式
- 输入字段,力格式00:00.00
- 如何自动求和输入字段与货币格式
- 输入字段中的数字自动转换为数千自动除法格式
- 将无效javascript格式的日期转换为ics标准datetime字段
- 为什么我不能在同一个js文件中建立两个clev .js格式的字段?
- 以美元货币格式显示输入字段