UI saying my observableArray().length == 0 one minute, then == 1 the next? - asp.net-mvc

Question

I am using knockout.js. I declare 2 model objects:
1)
var model =
{
products: ko.observableArray([])
}
2)
var customerModel =
{
cart: ko.observableArray([]),
filteredProducts: ko.observableArray([]),
currentView: ko.observable("list")
}
when the document is ready:
$(document).ready
(
function () {
getProducts();
}
);
it calls getProducts which sets the model.products observable array to have a single object:
var getProducts = function () {
model.products.removeAll();
model.products.push
(
{
Id: 1,
Name: "Product 1",
Description: "A nice product",
Price: 666.66,
Category: "Category 1"
}
)
}
i have a view that renders an ASP.NET partial view. the default customerModel.currentView is 'list' (as seen from the model object i declared):
<div data-bind="visible: customerModel.currentView() == 'list'">
#Html.Partial("ProductList")
</div>
in the partial view (ProductList.cshtml) is the following code:
<div data-bind="foreach: model.products()">
<span data-bind="text: $data.Description"></span>
<button data-bind="click: addToCart">Add to Cart</button>
</div>
clicking on the button invokes the addToCart function which adds a product to the cart and sets the view:
var addToCart = function (product) {
var cart = customerModel.cart;
cart().push
(
{
product: product,
count: 1
}
);
setView('cart');
}
setView is like this:
var setView = function (view) {
customerModel.currentView(view);
}
when set to 'cart', the following code renders a partial view:
<div data-bind="visible: customerModel.currentView() == 'cart'">
#Html.Partial("ProductCart")
</div>
now HERE is the kicker. ProductCart.cshtml looks like this:
<script>
var testCart = function () {
alert("There is " + customerModel.cart().length + " item incustomerModel.cart()");
}
</script>
<div data-bind="if: customerModel.cart().length == 0">There are no items in customerModel.cart( </div>
<button data-bind="click: testCart">Test Cart</button>
so guess what? the div that says "There are no items in customerModel" shows up because customerModel.cart().length == 0, however when i click the button the alert tells me that customerModel.cart().length is equal to 1.

Answer 1

It seems that you need to change cart().push to cart.push, as you are doing with model.products.
Thats how observableArrays work. See documentation.
When you call cart(), it returns a new array, with the values inside the observable. You are pushing your new value to that array, which is being lost in limbo.
You need to call the push method through the ko.observableArray API, this way it will notify all subscribers for that change, and the new value will be added to the observableArray.