0

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

ここに画像の説明を入力

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

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

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

function observeAmounts(){    
  people.forEach(function (person){
    $.observe(person, 'amount', function(e) {
        var amount =0;
        people.forEach(function(person){
            amount += parseInt(person.amount);
        });
        $('#output2').html('Total Amount: ' + amount);
    });
   });
}

 observeAmounts();

$.observe(people, function(e) {
    var l = $.map(people, function(n, i) { return i; }).length;
    $('#output1').html('Total No. of People: ' + l);
     observeAmounts();
});

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

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

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

4

1 に答える 1

1

ここでjsfiddleの更新バージョンを作成しました：http://jsfiddle.net/BorisMoore/wch601L9/

あなたが見逃した主なことは、observeAll を使用することです。

http://www.jsviews.com/#observeAll

$.observable(people).observeAll(totalAmount);

また、他のことのためにいくつかの異なるアプローチを追加しました。

宣言型イベント バインディング:

<td><button data-link="{on ~remove}">Remove</button></td>

配列の長さを表示するトップレベルのデータ リンク:

<span id="getLength" data-link="length"></span>

と

$("#getLength").link(true, people);

(トップレベルのデータリンクについては、このサンプルも参照してください: http://www.jsviews.com/#samples/editable/toplevel-for )

于 2014-09-08T19:07:37.577 に答える