knockoutjs refresh or update - ajax

Question

I trying create a ajax-refresh shopping-cart panel. My shopping-cart is listed but I can't refresh it in $.getJSON callback function. my view and code is;
<div class="panel panel-info">
<div class="panel-heading">
<i class="fa fa-list-ul"></i> Sipariş Listeniz
</div>
<div class="panel-body">
<div id="cart" data-bind="foreach: Currencies">
<div class="">
<span data-bind="text: Currency"></span>
<table class=" table table-striped" data-bind="foreach: Items">
<tr>
<td data-bind="text: Code"></td>
<td data-bind="text: Amount"></td>
<td data-bind="text: Price"></td>
<td data-bind="text: LineTotal"></td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel-footer">
</div>
</div>
and
var cartViewModel = {
Currencies: ko.observableArray()
};
$(function () {
ShowCart();
});
function AddToCart(i, a) {
$.getJSON('#Url.Action("AddToCart", "Products")/' + i + '?Amount=' + a, null, function (d) {
if (d)
ShowCart();
});
}
function ShowCart() {
$.getJSON('#Url.Action("GetCart","Products")', null, function (c) {
cartViewModel.Currencies = ko.observableArray(c);
cartViewModel.Currencies.valueHasMutated();
ko.applyBindings(cartViewModel);
});
}
How can I refresh the binding in the $.getJSON callback?

Answer 1

I think your problem is that you're overwriting the observables in your view-model.
All you need to do is pass a new value into the existing observable.
Try this instead:
function ShowCart() {
$.getJSON('#Url.Action("GetCart","Products")', null, function (c) {
cartViewModel.Currencies(c);
});
}