問題タブ [jsviews]

jsviews バインディングを使用して、ページに 2 つの要約データを表示したいと考えています。UI はスクリーンショットのようなものになります。

ユーザーはリストから人物を追加/削除でき、それは「人数」の値に影響し、ユーザーはテキストボックスで整数値を編集でき、合計値が「合計金額」に表示されます。

はい。私はそれを機能させることができました..そこに私のコードを見てください。http://jsfiddle.net/michaelsync/eqhkzv3t/3/

しかし、それは非常に醜いと思います。特に、以下のコードです。

さて、私はまだチュートリアルとjsviewsのソースコード/テストを読んでいます。しかし、私はJsViewsにとってかなりのニュースです。現在のコードでは、配列を繰り返しループして合計金額と人数を計算しています。ヘルパー クラスを登録できるかもしれないと思いますが、値を計算するために「people」配列をループする必要があります。

ですから、JsViews にはもっと良い方法があるのではないかと思います。JsViews のサイトでは、ここに質問を投稿するように指示されており、JsViews の作成者もここにいるので、これらの要約データの処理を進めるために、ここに投稿することにしました。(はい、ここで私のテスト コードを表示することもできますhttp://jsfiddle.net/michaelsync/eqhkzv3t/3/ )

アドバイスをいただければ幸いです。ありがとう！

JsViews の最新バージョンにアップグレードしましたが、何かが壊れたようです。

"visible{:property}" のようなデータ リンクがあれば、機能します。

"visible{convert:property}" のようなデータ リンクがある場合、それは機能しません。

私が言えることは、プロセスの早い段階で attr "visible" を見て、それを "css-display" に変更しているようです。ただし、コンバーターがある場合、propertyChangeHandler でこの行を実行します

attr = linkCtx.attr || 属性; // linkCtx.attr は、renderTag でのタグのインスタンス化中に tag.attr に設定されている可能性があります

これにより、attr が「visible」に戻り、updateContent で「css-」の正規表現テストが失敗し、display プロパティが設定されません。

何か不足していますか？これはうまくいかないのですか？

私がやろうとしていることを示すフィドルを作成しました。動作しない場合、display:none を設定する代わりに、visible="false" を設定します。

http://jsfiddle.net/4scbgjpx/2/

data-link で追加の属性をバインドすると、デフォルトのバインドと trigger=true が機能しなくなりました。エラーや明らかなものはありません。しかし、うまくいきません。

デフォルトのバインディング

この例 ( http://jsfiddle.net/BorisMoore/wch601L9/ ) では、属性 (例: value{:amount} ) を明示的に設定せずに "amount" プロパティがバインドされています。できます！

バインディングを追加してこのコードを変更すると、デフォルトのバインディング「金額」がテキスト ボックスに表示されなくなります。

ここ ( http://jsfiddle.net/michaelsync/xzo15n0s/ ) は、BorisMoore の例のフォーク バージョンであり、このシナリオを示すために変更を加えました。

私が見つけた解決策は、すべてのバインディングの属性名を明示的に設定することです。

それは既知の問題ですか？

トリガー=真

テキストボックスにいくつかの数値を入力すると (例http://jsfiddle.net/michaelsync/xzo15n0s/ )、合計が更新されないことがわかります。

これを回避する方法がわかりません。これも既知の問題ですか？

この質問が明確でない場合は、お気軽にお知らせください。ありがとう！

注: なぜ 2 つの属性をバインドしたいのか疑問に思われている方のために、これは私がテストしているサンプルです。http://jsfiddle.net/michaelsync/078cazh8/2/

更新＃1：

現在、JsViews ソース コードをデバッグしています。コード サンプルをデバッグ用に変更しました。

こちらがv1です。http://jsfiddle.net/michaelsync/tmwyhc7n/1/

バインディングが 1 つだけのテンプレート

JS

ブレークポイントを設定しましたfunction parseTag(all, bind, tagName, converter, colon, html, comment, codeTag, params, slash, closeBlock, index)

ヒットしただけで、「all」パラメータの値は「{{:amount trigger=true}}」です

ここで、以下のようにバインディングを追加しました。

V2: http://jsfiddle.net/michaelsync/tmwyhc7n/2/

次に、「amount」と「isSameAmountForAll」をバインドしたため、2 つのヒットがありました。解析で「trigger=true」が欠落していることがわかります。

だから..「trigger = true」を amount 内に移動しました。

V3: http://jsfiddle.net/michaelsync/tmwyhc7n/3/

更新＃2：

解析は正しいようですが、ObserverAll は機能しません。

金額の変化を検出するために以下のコードを変更しましたが、イベントはトリガーされません。

V4: http://jsfiddle.net/michaelsync/tmwyhc7n/4/

このページhttp://www.jsviews.com/#linked-elem-syntaxを読んで、少しテストしています。

1. 私はこれで始めるのが好き..

<input data-link="name trigger=true"/>タグは自動的に双方向のデータバインディングを持つことに注意してください。

「trigger=true」を削除すると一方向のバインドになると言うのは正しいですか? それとも、まだ双方向バインディングですか?

「trigger=true」を持っている場合と「trigger=true」を持っていない場合の唯一の違いは、「trigger=true」を持っている場合、プロパティ変更イベントの更新を取得することです。それ以外の場合は、lost-focus イベントで更新が表示されます。

2. 最後に「:」があることにも混乱しています。

の完全な構文では、末尾の「}」の前に「:」が追加されていることに注意してください。双方向のデータバインディングに対応しています。

最後に「:」を付けると、「trigger=true」を付けたのと同じ効果があるということですか?

しかし、私は以下のコードを試しましたが、「trigger=true」を持つコードのようには機能しません。

JsViews の最上位要素にデータ リンクするときに、else タグを使用することは可能ですか?

もしそうなら、あなたはこのような例でelseタグをどこに置きますか?

なぜこれを正しく理解できないのか疑問に思っていました。「ジョブ」オブジェクトのコレクションを返す MVC に JSONResult があります。「Job」オブジェクトのプロパティの 1 つに Dictionary があります。これを「Job」エンティティ テンプレートに追加する方法がわからないので、内部テンプレートのすべての値を表示できます。現在のオブジェクト設計はジョブであり、各ジョブにはジョブ フェーズのディクショナリがあります。次のコードは、私が現在使用しているものです。

Job.cs

クライアント側のスクリプト:

Array に関数を追加できるように、(TypeScript を使用して) Array をサブクラス化しました。以下のコードを参照してください。

その後、{for}JsRender/JsViews のタグが機能しなくなっていることに気付きました。また、JsRender/JsViews が配列を反復処理するために使用していることにも気付きました。これは、サブクラス化された配列$.isArray(...)を返します。false

JsRender/JsViews コードを使用するように変更する(data instanceof Array)と、機能します。

JsRender/JsViews{for}タグを使用してサブクラス化された配列を取得する別の方法 (JsRender/JsViews コードを変更せずに) はありますか?

タイプスクリプト:

生成された Javascript: