knockout binding not work for second time

Question

I use knockout in MVC c# project. I have shopping cart button on my web page and use below code to load shopping cart as modal dialog. This code works for first time but when I click again on shopping card it's not work. I know this problem is related to ko.applyBindings(new CartViewModel()); but I don't how to resolve it,

Any solutions and ideas are welcome.

 $("#ShoppingCartButton").on("click", function () {
      $("#ShoppingCartDialog").load("/Order/ShoppingCart", function () {
            ko.applyBindings(new CartViewModel());
            $("#ShoppingCartDialog").modal('show');
        });
   });

Answer 1

You should apply binding only for #ShoppingCartDialog,

ko.applyBindings(new CartViewModel(), "ShoppingCartDialog");

Answer 2

What you could try to do is remove the binding first, and then apply the binding again. You probably also want to bind the viewmodel to just the shoppingCartDialog:

$("#ShoppingCartButton").on("click", function () {
    //remove the binding
    ko.cleanNode($("#ShoppingCartDialog")[0]);

    $("#ShoppingCartDialog").load("/Order/ShoppingCart", function () {

        //bind a new viewModel, just to the shoppingcartdialog.
        ko.applyBindings(new CartViewModel(),$("#ShoppingCartDialog")[0]);

        $("#ShoppingCartDialog").modal('show');
    });
});