create a wizzard with knockout
===

I have a wizard that allows the user to enter information in each step
I would like to display all information entered by the user at the end of wizard ?

here is the code for my wizard:

**View:**
       <div data-bind="template: { name: 'currentTmpl', data: currentStep }"></div>

       <hr/>
       <button data-bind="click: goPrevious, enable: canGoPrevious">Previous</button>
       <button data-bind="click: goNext, enable: canGoNext">Next</button>

      <script id="currentTmpl" type="text/html">
      <h2 data-bind="text: name"></h2>
      <div data-bind="template: { name: getTemplate, data: model }"></div>
      </script>

     <script id="basicTmpl" type="text/html">
    <p> Product Name: <input data-bind="value: ProductName"/></p>
    <p> Product Description:<input data-bind="value: ProductDescription"/></p>
    
     </script>

     <script id="choiceTmpl" type="text/html">
    <p> Price: <input data-bind="value: Price"/></p>
    <p> Number: <input data-bind="value: Number"/></p>
    </script>

    <script id="confirmTmpl" type="text/html">
    <button data-bind="click: confirm">Confirm</button>
     </script>
    <script id="endTmpl" type="text/html">
    <div data-bind="text: message"></div>
    </script>

**ViewModel:**

    function Step(id, name, template, model) {
     var self = this;
     self.id = id;
     self.name = ko.observable(name);
     self.template = template;
     self.model = ko.observable(model);  
    
     self.getTemplate = function() {
       return self.template;   
     }
     }

    function ViewModel() {
    var self = this;
    self.stepModels = ko.observableArray([
         new Step(1, "Welcome", "basicTmpl", new ProductViewModel()),
        new Step(2, "Choices", "choiceTmpl",new InfoProductViewModel()),
        new Step(3, "Confirmation", "confirmTmpl", { confirm: function()     {self.currentStep(self.stepModels()[3]); } } ),
         new Step(4, "Congratulations!", "endTmpl", { message: "you are finished!" })
    ]);
    
    self.currentStep = ko.observable(self.stepModels()[0]);
    
    self.currentIndex = ko.dependentObservable(function() {
        return self.stepModels.indexOf(self.currentStep());    
    });

    self.getTemplate = function(data) {
         return self.currentStep().template();   
    };

    self.canGoNext = ko.dependentObservable(function() {
        return self.currentIndex() < self.stepModels().length - 1;
    });

    self.goNext = function() {
        if (self.canGoNext()) {
             self.currentStep(self.stepModels()[self.currentIndex() + 1]);   
        }
    };
             
    self.canGoPrevious = ko.dependentObservable(function() {
        return self.currentIndex() > 0;
    });

    self.goPrevious = function() {
        if (self.canGoPrevious()) {
             self.currentStep(self.stepModels()[self.currentIndex() - 1]);   
        }   
    };
    
      function ProductViewModel() {
        // Data
        var self = this;
        self.ProductName = ko.observable();
        self.ProductDescription = ko.observable();
    }        
      function InfoProductViewModel() {
        // Data
        var self = this;
        self.Price= ko.observable();
        self.Number= ko.observable();
    }
    };

    ko.applyBindings(new ViewModel());

I am sorry for my bad English

Thanks,