javascript - Ractive と配列、データが更新されていない

Question

ractiveの使い方を学んでいるのですが、問題を解決できません。コードは次のjsfiddleにあります。

私がやっていることの要点は、キューのカウンターです (配列の最後のオブジェクトは現在の人物です): 1. 現在の人のキュー番号を表示するカウンター 2. キューのサイズを表示するカウンター

A) 正しく動作しますが、ロジックが肥大化しているため、B) に示すように別の変数に変換しようとしましたが、まったく更新されません。

キュー変数に変更があったときに監視するオブザーバーをコードに入れました。「現在の人物をスキップ」または「現在の人物を削除」をクリックするたびにアラートが表示されることを期待していますが、ページを初めて読み込んだときにのみアラートが表示されます。

    ractive.observe({
      'queue.0.queueNo': alert('here')
    });

score 6 · Accepted Answer

Wimの答えは良いもの{{num(queue)}}です - エレガントなソリューションです。

使用できない理由は、使用queueNumするときです

queueNum = people[(people.length-1)].queueNo

の値は、ステートメントの時点での値にqueueNum設定されます。キューが変更された場合、再評価されません。これは Ractive ではなく、JavaScript の問題です。 people[(people.length-1)].queueNoqueueNum

別の言い方は、

a = 1;
b = 2;
foo = a + b; // foo === 3

a = 3;
b = 4;
alert( foo ); // alerts '3' - foo is the same, even though a and b changed

これは実際には、ページがロードされたときにのみトリガーされたのと同じ理由ですalert('here')。Wim の回答の 2 番目のコードブロックのように、関数でラップして値が変更されたときにアラートをトリガーするように Ractive に指示するのではなく、コードはすぐに実行されました。 .

score 3 · Accepted Answer

次のように、queueNum を queue に基づく関数にすることができます。

num: function(q) { return q[(q.length-1)].queueNo;}

次のように呼び出します。これで{{num(queue)}} 、キューまたは人がリアクティブに更新されると、num を更新する必要があることがわかります。ractive.update() を呼び出す必要さえありません。観察のためにもそれを関数にするとうまくいきます：

ractive.observe({
    'queue.0.queueNo': function(a,b) { alert('here');}
});

2 に答える 2