基本的に私はこれをしたい:口ひげのテンプレートでは、末尾のコンマなしでコンマ区切りのリストを表現するエレガントな方法はありますか? Ractive テンプレートで。

オブジェクトの場合

「赤、緑、青」
を出したい 最終項目にいるのか知りたいので区切りを印刷するかどうか知りたいです。何かのようなもの：

問題のデモについては、このペンを参照してください(チュートリアルのスライドショーに基づく)。「次へ」と「前へ」の矢印をクリックすると、imgIndex口ひげは正しく更新されますが、 などの式の口ひげ<p>{{ curImageCaption() }}</p>は値がいつ変更されるかを認識しません。

つまり、オブジェクトは、式が再評価されると口ひげの値が変わるように変更されますが、ractive はそれを認識していないようです。書き込みアダプターを除いて、これを機能させる方法はありますか? マジックモードの仕組みを誤解していますか? 興味深いことに、イベント ハンドラー内で明示的に呼び出してもractive.update()、ractive は応答しません。

新しい情報で更新

さらにいじった後、私はそれを機能させるこのハックを思いつきました。ハックは、変更することです。たとえば、単純なプリミティブを口ひげの表現<p>{{ curImageCaption() }}</p>に<p>{{ curImageCaption(imgIndex) }}</p>追加して、ractive が正しく監視する方法を理解するようにします。

今何が起こっているかはわかりますが、変化するプリミティブを含む口ひげ式に引数を明示的に追加する必要があると、別のドメイン オブジェクトを持つ目的の多くが無効になります。つまり、ractive を念頭に置いてドメイン オブジェクトをコーディングしています。プリミティブの変更を使用して、変更を通知するための一種の基本的な pub/sub メカニズムを使用します。

カスタム オブジェクトに実際の pub/sub メカニズムを作成する必要があり、それが ractive で明示的にサブスクライブされるのは問題ありません。問題は、OPで指摘したように、 ractive が を介して変更を通知された場合ractive.update()でも、偽の引数ハックを使用しない限り、口ひげを再計算する必要があることをまだ認識していないことです。そのため、すべてを機能させるためにどのコールバック ractive を登録する必要があるかは明確ではありません。

これを行うのに十分なほどractiveの内部動作を理解していませんが、必要なのは、それらを直接_deps操作し、式の再計算を手動でトリガーする機能であると思います。これが正しいと思われる場合は、それを達成する方法の例をいただければ幸いです。

UPDATE 2 -- まともな解決策

これは、それほどハックではない回避策の概念実証です。

アイデアは、ECMA5 プロパティを使用してカスタム ドメイン オブジェクトを装飾し、使用したいが、ractive テンプレート内では機能しない既存のメソッドに委任するプロパティを提供することです。プロパティ、おと、うまくいきます。

<p>{{ curImageCaption() }}</p>そのため、単純に を記述する代わりに、次の<p>{{ imageCaption }}</p>ようにカスタム ドメイン オブジェクトを装飾します。

この装飾は、私のデモでは少し冗長ですが、オブジェクトの新しい ractive フレンドリなプロパティ名をオブジェクトの既存のメソッドの名前にマッピングし、上記のボイラープレートを処理するオブジェクトを受け入れるヘルパー メソッドを作成することで、簡単にスリム化できます。 .

注: この方法の欠点の 1 つはractive.update()、イベント ハンドラーで手動で呼び出す必要があることです。それを回避する方法があれば知りたいです。また、そうでない場合、これによってどの程度のパフォーマンス ヒットが発生するのでしょうか? それは、ractive の外科的アップデートの目的全体を無効にしますか?

Update 3 -- より適切な解決策はありますか?

このペンはさらに別のアプローチを採用しており、汎用ディスパッチャ オブジェクト ( を実装するオブジェクトnotify()) を介してカスタム ドメイン モデルを ractive にリンクします。これまでのアプローチの中でこれが私のお気に入りだと思います....

これは公式のractive アダプターに似ていますが、オブジェクトをラップするのではなく、非公式の ractive アダプターをドメイン オブジェクトに渡すために DI を使用しています。一見、「非アクティブにコーディング」しているように見えるかもしれませんが、実際にはこれは部分的にしか当てはまりません。別のフレームワークを使用していたとしても、何らかの通知メカニズムを使用して変更をビュー モデルにブロードキャストし、ビューがそれに反応できるようにする必要があります。この DI アプローチは、公式の ractive アダプターよりもボイラープレートを必要としないようですが、これを確実に知るのに十分なほどよく理解していません。公式のアダプターほど完全に一般的なソリューションでもありません。

後世のためのペンからのコード

HTML

JS

RactiveJS は JSX と互換性がありますか?

マークアップの一部は互換性がないと推測しています。厳密な型付けと、JavaScript ソースでテンプレートをきれいに記述できる点が気に入っています。多分これは悪い設計と見なされますか？

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

私は ractive.js で遊んでいて、何ができるかを理解しようとしています。かなり一般的な例があります。これは、きれいに追跡したい内部状態ロジックを持つビューです。チュートリアルを完了すると、これは Ractive が得意とするもののように思えますが、私はこれを理解するのに苦労しています。

更新:最初に得た回答のフィードバックに基づいて、以下のテスト ケースを修正し、私が抱えていた正確な問題を明確にしました。ここで完全な例を見ることができます: http://jsfiddle.net/e7Mjm/1/

まず、ractive テンプレートがあります。

これをフォーマットするための簡単な CSS スタイルがいくつかあります。

そして、それをすべて機能させるための次のJavascript：

JS Fiddle を試してみると、テンプレートが正しくレンダリングされることがわかりますが、インタラクションの動作は正しくありません。クリックすると、そのセクションが開きますが、アイコンだけでなくa.expand、他のすべてのアイコンのクラスも変更されます。a.expandクリックされたもの。

これは私が抱えている本当の問題です。ractive イベントバインディングでは、ユーザーが操作している特定のデータオブジェクトのみに影響を与える操作を定義するのにあまり良い方法はないようです。すべてのデータに影響を与えます。

これを正しくスコープする方法についての洞察はありますか?

プロパティの値を非同期的にロードするモジュール (module1) を定義しました。このプロパティを定義したらすぐに、定義後にのみアプリで使用するにはどうすればよいですか?

私のセットアップ（簡略化）

v1

app.js

module1.js

値/person.json

これは、GET がほぼ瞬時に行われる場合にのみ機能します。それ以外の場合は、getPersonName が呼び出されたときに _person が定義されていないため、失敗します。

v2

これに対抗するために、人がロードされたときにアプリに通知するコールバックを登録することにしました。

app.js

module1.js

これは、GET が遅い場合は機能しますが、速い場合は _onLoaded が.done()呼び出されたときに未定義です。

app.js で _person 値が定義されるとすぐに、定義されたときにのみ使用する良い方法はありますか?

私は RequireJS を使用していますが、私の質問は一般的に AMD に当てはまります。

編集

例を単純化するために、重要なレイヤーを削除しました。UI には RactiveJS を使用しています。

セットアップ (やや簡素化)

app.js

編集 2

私の現在の解決策は、変更される可能性があります。person がロードされたときに app.js に通知するコールバックを登録します。コールバックが登録されているときに person がすでにロードされている場合、コールバックはすぐに呼び出されます。

app.js

module1.js

ractive 変数をラジオボタンにバインドする最も簡単な方法は、

ただし、名前の中括弧は html に残ります。それを出力する賢い方法はありますか

htmlで、フォーム処理を変更する必要はありませんか? 私は次の行に沿っていくつかのロジックを試しました

しかし、それは束縛しません。

また、それほど重要ではありませんが、私が持っているかのように、それを数値としてバインドする方法はありますか

次に、ボタンがチェックされませんか？