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')仅在页面加载时触发的原因相同 - 而不是告诉 Ractive 在值更改时通过将其包装在一个函数中来触发警报，如在 Wim 答案的第二个代码块中，代码立即执行.

score 3 · Accepted Answer

你可以让 queueNum 成为一个基于队列的函数，如下所示：

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