knotckout js foreach appending rows automatically in IE 7 and 8

Question

I have a "mini-cart" in a eCommerce site that I am bulding. For the "mini-cart" i use foreach to add items to a table.

The "mini-cart" is a dropdown and it is rendered from a razor file. When i close the "mini-cart" and opens it again it automatically appends all the rows one more time. So everytime I close the "mini-cart" and opens it again. All the rows gets appended one more time.

When the cart is opened this code is run.

showCart = function () {
    WebService.PostJson("/services/CartService.svc/GetCart", {},
        function (cartDto) {
            updateCart(cartDto);
            postman.deliver('cartShown', 1);
        },
        function () {

        });
};

The table looks like this.

<table width="100%" >
    <thead data-bind="foreach: Items, stripe: Items, evenClass: 'even', oddClass: 'odd'">
    <tr>
        <td data-bind="text: ArticleNo">
        </td>
        <td data-bind="text: Name" style="width:390px;">
        </td>
        <td>
            <input type="text" data-bind="value: Quantity" class="quantity"/>
        </td>
        <td class="cart-price-column">
            <span class="cartRowSubTotal" style="display: none;" data-bind="text: SubTotal"></span>
        </td>
        <td>
            <a href="#" class="erase" data-bind="click: remove">Ta bort</a>
        </td>
    </tr>
    </thead>
    </table>

updateCart does a Items.splice(0); so it should reload it self each time. But it does not seem to work i internet explorer 7 and 8.

Is there anyway to "clear" the table everytime? Or can the viewmodel figure this out on its own?

Thanks.

UPDATE:

It seemed that the splice method did not empty the array for some reason. When changed to cart.Items([]) it started to work.

Answer 1

Set cart.items(null); Nothing to do with IE!

Answer 2

In IE, the length parameter is required. Leaving it empty causes the function to do nothing. Call it like this: Items.splice(0, Items().length) .