jsviews reactive helper doesn't update with depends = [...] defined

Question

A helper that I have indicated depends on a variable in my model and that I am using in a template does not rerender when updating the depended upon variable as can be seen in http://jsfiddle.net/ep76m4af/3/

Below is the data and template helper definition:

var data = {
    scenarios: scenarios,
    selectedScenario: scenarios[0],
    selectedInstances: [scenarios[0].instances[0]]
};

$.templates({
    scenariosTemplate: {
        markup: "#view",
        helpers: {
            isSelected: (function () {
                function helper (instance) {
                    return (data.selectedInstances.indexOf(instance) > -1);
                }
                helper.depends = [data, "~root.selectedInstances"];

                return helper;
            })()
        }
    }
});

And this is the relevant template code:

{^{for selectedScenario^instances}}
     <div data-link="{:name} selected{:~isSelected(#data)}"></div>
{{/for}}

When adding a instance to data.selectedInstances with

$.observable(data.selectedInstances).insert(instance);

the view does not update accordingly.

Is the ".depends" portion of my code not correct or is something else wrong?

BTW, I need to keep the selection out of the scenarios because the scenarios will be stored in a database and the selection is clientside only.

Answer 1

Changing ~root.selectedInstances into ~root.selectedInstances.length solved the problem

 helper.depends = [data, "~root.selectedInstances.length"];

See http://jsfiddle.net/ep76m4af/4/