ractivejs - Ractive コンポーネントのテキストの参照

Question

2 つのテキスト フィールドの長さが 0 より大きい場合にボタンを有効にしたい: これらのテキスト フィールドの長さをどのように参照すれば表現できますか? シンプルに思えますが、コンポーネントとそのテキスト (長さ) を参照する方法は明らかではありません。私は基本的にFRPを使用して、フォーム送信のボタンを有効/無効にしたいと考えています。これらは、私が推測する「兄弟」コンポーネントになります。

Answer 1

双方向バインディングがオプションの場合、次の行に沿って何かを行うことができます。

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

これが機能するのは、空の文字列 ( '') が JavaScript では偽物であり、との両方が空でない場合!foo || !barのみです。falsefoobar

Answer 2

@Rich Harris: このトリックの問題は、最初はとがあり、文字列 を与えるため、<button disabled="{{ !(''+foo) || !(''+bar) }}">submit</button>ボタンが最初に有効になっていることのようです。さまざまな検証要件を持つ複数のフィールドがある場合、この手法も扱いにくくなります。foobarundefined''+undefined'undefined'

ご存知かもしれませんが、Angular には$invalidフォームに適用できる があります。たとえば、<button ng-disabled="myForm.$invalid">submit</button>はmyFormフォームのname属性です。isvalidRactive では、関数を記述して使用できると思います<button disabled="{{ !isvalid() }}">submit</button>が、それは 1 つのフォームでしか機能しません (または、それを特定の要素に「アタッチ」する方法はありますか?)。