JsViews Data-Link Helper Function

I have the following helper defined:

$.views.helpers({
    total: function(lines) {
        var total = 0;

        for (var i = 0; i < lines.length; i++) {
            total += lines[i].price * lines[i].quantity;
        }

        return total;
    }
});

Then I have have the following code to data link my model to my view:

var model = {
    lines: []
};

$("#lines").link(true, model);

Finally within the view I have the following:

<span data-link="~total(lines)"></span>

However whenever I observably add or remove items from the array it doesn't update the total. I read that you could pass in lines.length into the function and indeed it updated the total each time I added or removed an item. But when I observably updated the quantity property against any of the lines the total did not update.

I'd appreciate it if someone could show me how to do this.

Thanks

Solution

Yes, as you found with https://github.com/BorisMoore/jsviews/issues/280, there is not currently a declarative syntax for depending on "All". Probably after V1.0 that feature will be added - along the lines of total.depends = "lines**"; or total.depends = "lines*.*"; for a helper: function total(...)...

Meantime you can use a programmatic approach - which is still very easy. Just trigger a refresh by adding:

$.observable(model.lines).observeAll(function() {
    $("#lines").link(true, model);
})

or refresh just the 'total' span by writing:

<span id="total" data-link="~total(lines)"></span>

and

$.observable(model.lines).observeAll(function() {
    $("#total").link(true, model);
})

See for example: http://jsfiddle.net/BorisMoore/wch601L9/