JsViews Data-Link Helper Function

0
votes

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

2
jsviews

2 Answers

0
votes

I've found the following issue which has a couple of suggested fixes:

https://github.com/BorisMoore/jsviews/issues/280

Unfortunately both are abit of a hack but I guess it will have to do for now.

0
votes

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/