Ractive和数组,数据未更新

Question

我正在学习如何使用ractive并且无法解决问题,代码在以下jsfiddle.

我正在做的是对队列的计数器(数组中的最后一个对象是当前人):1.显示当前人的队列号的计数器2.显示队列大小的计数器

A)工作正常,但它是逻辑膨胀所以我试图将它转换为一个单独的变量,如B)所示,但它根本不更新.

我在代码中放置了一个观察者,以观察队列变量是否有任何变化.我希望每次点击"跳过当前人"或"删除当前人"时都会显示警报,但警报仅在我第一次加载页面时显示.

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

Answer 1

Wim的答案很好 - {{num(queue)}}是一个优雅的解决方案.

你不能使用的原因queueNum是当你这样做

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

的值queueNum设置为的任何值 people[(people.length-1)].queueNo是在声明的时间.更改队列时,queueNum不会重新评估.这不是一个Ractive的东西,而是一个JavaScript的东西.

另一种说法是

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的答案的第二个代码块中,代码立即执行.

Answer 2

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

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

并这样称呼它：{{num(queue)}} 现在，当队列或人员更新时，反应知道它必须更新 num to。你甚至不必调用ractive.update()。对于观察，也将其设为一个函数，它将起作用：

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