問題タブ [ractivejs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
3 に答える
679 参照

javascript - 複数の値を持つ Ractive 双方向バインディング

複数の無線入力があります。ユーザーは、または各行からいずれfixedpercentageを選択する必要があります。すなわち

ここに画像の説明を入力

ractive のドキュメントに最適な定義が見つかりません。

私のjsが持っているとき {name: 'foo', checked: true}

そして、私のテンプレートは

<input type="radio" name="{{name}}" value="fixed" checked="{{checked}}">Fixed

その言葉どおり、私はそれをラアクティブで行うことはできません

A radio input can have two-way binding on its name attribute, or its checked attribute - not both

入力要素で複数の値を使用するのに役立つことがわかっているドキュメントはありますか。

または、どうすればractiveでそれを行うことができますか?

ありがとう。

0 投票する
1 に答える
246 参照

ractivejs - 更新時に部分的に Ractive トランジションが機能しない

更新:ここにフィドルがあります。それは私自身の実際のアプリよりも少しうまく機能しますが、それでも潜在的なバグ (または私の誤解) を浮き彫りにします。「アウトロ」トランジションが機能しないことに注意してください。

http://jsfiddle.net/k4a81fza/1/

オリジナル:

これは、親Ractive内で使用しているパーシャルです:

次に、データを更新しようとしている方法を次に示します (詳細ビューを表す別の ractive から変更されます)。

テンプレート内の<p>タグは正常に消えますが、トランジションはありません。他のトランジションを試し、デュレーションとディレイを微調整しましたが、常に即座に削除されます。

理想的には、別のアウトロとイントロのトランジションが必要です。これは、次のような方法で実現できると考えていました。

繰り返しますが、これは に表示されるプロジェクト値を更新するために機能しますが、<p>トランジションはありません。

私が求めていることを達成する方法はありますか?

0 投票する
2 に答える
528 参照

ractivejs - ractivejs テンプレート内で配列フィルターを呼び出す方法

したがって、データ関数を使用したくありません (たとえば、最終ユーザーがテンプレートとのみ対話し、javascript をハードコーディングしないようにしたいとします)。この配列にn 個の要素がある場合、 ractive 内でm 個の要素を取得できるようにするには、どうすればそれをフィルター処理できますか?テンプレート ?今、私はこのコード>> http://jsfiddle.net/t168vymw/4/を持っていますが、これは正しく動作していません。

要件: 一部の関数を使用してフィルター処理を行うことはできません data: {filtersomething: function(){...} } が、代わりに、ユーザーがテンプレートから複雑な配列関数の変換を使用できるようにします。ractive はまだこれをサポートしていますか?

0 投票する
1 に答える
416 参照

json - Ractive で、2 つの json ファイルを結合し、それに応じて出力します

初めて ractive を試行し、エラーが発生しました。[オブジェクト オブジェクト] 繰り返し印刷されます。両方のファイルを 1 つに結合しようとしました (問題は、コレクションと広告が異なるため、両方を結合する方法は?)

広告と非広告はそれぞれ印刷されます。つまり、最初にフリーウォール レイアウトで広告アイテムが印刷され、その後、非広告アイテムが印刷されます。

コードのどこかが間違っている可能性があります。

Ractive テンプレート

脚本

HTML

  1. 2 つの json を 1 つに結合する方法は? これらは 2 つの異なるファイルになるため、後でファイルから json を取得します。
  2. Advertised は、条件付きの印刷広告と非広告アイテムでは機能しません。Ractive Web サイトで条件付きのチュートリアルを試してみました。
  3. 広告アイテムを最初に印刷し、次に非広告アイテムをフリーウォール レイアウトでレイアウトすることは可能ですか (フリーウォールが何かわからない場合は、http://vnjs.net/www/project/freewall/ ?

助けていただければ幸いです。

更新: まだ問題があります テスト メッセージを確認してください -

また{{/if}}{{/each}}違法なエラーを出している

2 つの URL からの json ファイル

ページに何も表示されない - エラーが修正されても空白で表示されます。コレクションにアクセスできず、jsonファイルで宣伝されているため、jsonファイルが理由であるかどうか疑問に思っていますか?

助けてください、感謝します

0 投票する
1 に答える
87 参照

javascript - RactiveJSで計算された関数を持つことは可能ですか?

計算されたプロパティを引数で実行する方法はありますか? ほとんど計算された関数です。

JS コード

HTML

0 投票する
1 に答える
1440 参照

ractivejs - コンポーネントの再レンダリングを強制する

できればテンプレートから、古いコンポーネントの場所でコンポーネントを完全に破棄して再インスタンス化する最良の方法は何ですか?

私たちのユースケースは、ビューで使用される一連のバックボーン モデル/コレクションがあることです。ではinit、これらのモデルまたはコレクション イベントの一部をリッスンする場合があります (深い場合もあります)。または、そのモデルに関連する何らかのセットアップ作業を行う場合もあります。ビューでモデル プロパティ全体が変更されたかどうかをリッスンし、イベントのバインドを解除して新しいモデルにバインドし、セットアップ作業をやり直すか、ビューを強制的に破棄して新しいものをその場所に配置するかの 2 つのオプションがあるようです。テンプレートが大幅に、または完全に変更される可能性があるためです。変更の重要性と、ビューの白紙の状態から確実に開始できるようにするため、後者のルートを選択しました。

この時点まで、コンポーネントを条件付きでラップし、ブール値を変更して古いコンポーネントを破棄し、新しいコンポーネントを再レンダリングするようにしました。

HTML

JS

これはまともなアプローチですか、それとも私たちはこれをすべて間違っていると考えていますか? 特に私たちのアプリのいくつかの場所で必要なため、より良いオプションが必要なようです.

0 投票する
2 に答える
919 参照

jquery-ui - Ractive が jquery-ui datepicker からの変更をキャプチャしない

Ractive テンプレートで jquery-ui の datepicker を使用していますが、双方向バインディングが正しく機能していないようです。

私の入力は次のようになります。

次に、「ピッカー」デコレータを使用して日付ピッカーをインスタンス化します。

日付ピッカーは完全に表示されますが、値が適切に更新されません。{{value}} を通過して観察すると、datepicker によって値が設定されると、値が変更されたと Ractive が認識していないことがわかります。フィールドをクリックして再び戻ると (フォーカスが失われます)、オブザーバーがトリガーされ、値が設定されます。

私のデコレーターでは、datepickers の「onSelect」イベントを使用してトリガーするようにコールバックをセットアップできますが、デコレーター関数から強制的な変更イベントを強制するにはどうすればよいですか?

0 投票する
1 に答える
435 参照

javascript - RactiveJS テンプレートの条件付き HTML

HTML を条件付きで ractive テンプレートに表示しようとしていますが、成功しません。

このJSFiddleでわかるように、結果は期待どおりではありません。テーブルは単一の行です。

私のテンプレート:

私のJavascript: