ractivejs - 引用 Ractive 组件的文本

Question

我想在两个文本字段的长度 > 0 时启用一个按钮：如何参考这些文本字段的长度来表达这一点？看起来很简单，但对我来说如何引用组件及其文本（长度）并不明显。我基本上想使用 FRP 来启用/禁用表单提交按钮。我想这些将是“兄弟”组件。

Answer 1

如果双向绑定是一种选择，您可以按照以下方式进行操作：

<input value='{{foo}}'>
<input value='{{bar}}'>
<button disabled='{{ !foo || !bar }}'>submit</button>

这是有效的，因为空字符串 ( '') 在 JavaScript 中是虚假的，因此!foo || !bar只有false在两者foo和bar都是非空的情况下才会如此。

Answer 2

@Rich Harris：似乎这个<button disabled="{{ !(''+foo) || !(''+bar) }}">submit</button>技巧的问题在于按钮在开始时被启用，因为fooandbar最初都undefined给出''+undefined了 string 'undefined'。如果您有多个具有各种验证要求的字段，该技术也会变得笨拙。

您可能知道，Angular 有一个$invalid可以应用于表单的，例如，表单的属性<button ng-disabled="myForm.$invalid">submit</button>在哪里。在 Ractive 中，我想可以编写一个函数然后使用，但这仅适用于一种形式（或者是否有某种方法可以将其“附加”到特定元素？）。myFormnameisvalid<button disabled="{{ !isvalid() }}">submit</button>