Ractive and arrays, data not being updated

Question

I'm learning how to use ractive and can't solve a problem, the code is at the following jsfiddle.

The gist of what I'm doing is counters for a queue (last object in array is current person): 1. A counter to display the queue number of the current person 2. A counter to display the size of the queue

A) works correctly but it is bloated with logic so I tried to convert it into a separate variable, as shown in B) but it doesn't update at all.

I put an observer in the code to watch when there is any change to the queue variable. I expect it to show an alert every time I click on "skip current person" or "delete current person" but the alert only shows up in the first time I load the page.

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

Answer 1

Wim's answer is a good one - {{num(queue)}} is an elegant solution.

The reason you can't use queueNum is that when you do

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

the value of queueNum is set to whatever the value of people[(people.length-1)].queueNo is at the time of the statement. When the queue is altered, queueNum doesn't get re-evaluated. This isn't a Ractive thing so much as a JavaScript thing.

Another way of saying it is

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

This is actually the same reason that the alert('here') was only triggering when the page loaded - rather than telling Ractive to trigger the alert when the value changed by wrapping it in a function, as in the second code block of Wim's answer, the code was executed immediately.

Answer 2

you can make queueNum a function based on queue like this:

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

and call it like so: {{num(queue)}} now when queue or people gets updated reactive knows it has to update num to. You don't even have to call ractive.update(). For the observe also make it a function and it will work:

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