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。这不像是一个反复无常的事物。

另一种说法是

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更新为。你甚至不必调用ractive.update（）。对于观察也使它成为一个功能，它将起作用：

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

Ractive和数组，数据未更新

2 个答案: