Using the knockout Practice 03 in ASP. NET MVC, use the data parameter skillfully

With knockout, when creating a view model from a constructor, the number of arguments to the constructor is likely to be indeterminate, so there is a solution: pass the parameter data of type object to the constructor.

<input data-bind= "value:name"/>
<select data-bind= "options:categories, value:category" ></select>
@section scripts
{
    <script src= "~/scripts/knockout-2.2.0.js" ></script>
    <script type= "text/javascript" >
        $ (function () {         
            $.getjson (' @Url. Action ("getfirstproduct", "Home") ', function (data) {
                Product.name (data. Name);
                Product.category (data. Category);
            });
        });
        var categories = [" novel ", " prose ", " biography "];
        var Product = function (data) {
            data = Data | | {};
            this. Name = Ko.observable ();
            this. Category = Ko.observable ();
            this. categories = categories;
            this. Initialize (data);
        };
        Ko.utils.extend (Product.prototype, {
            Initialize:function (data) {
                this. Name (Data.name);
                This category (Data.category);
            }
        });
        New Product ({
            Name: " default value ",
            Category: " biography "
        });
        Binding
        Ko.applybindings (product);
    </script>
}
Above, when creating product through the constructor, only one parameter is used, data. Assign a default value to the product's individual members when instantiating product. In addition, an extension method was added for the product's prototype for initialization.
When the page is loaded, an asynchronous request is sent to the controller, and the value returned to product is not the initial value.
If you want to return to the state of the product's initial value, how do you do it?
Can be completed in 3 steps:
1. Add an attribute origiondata to product to store the initial state
2. Add an extension method to the prototype of product to return to the initial state, that is, the Origiondata attribute value as the parameter of the initialization method
3. Add a button on the page to bind the extension method of product
<input data-bind= "value:name"/>
<select data-bind= "options:categories, value:category" ></select>
<button data-bind= "click:revert" > Return to Initial State </button>
@section scripts
{
    <script src= "~/scripts/knockout-2.2.0.js" ></script>
    <script type= "text/javascript" >
        $ (function () {         
            $.getjson (' @Url. Action ("getfirstproduct", "Home") ', function (data) {
                Product.name (data. Name);
                Product.category (data. Category);
            });
        });
        var categories = [" novel ", " prose ", " biography "];
        var Product = function (data) {
            data = Data | | {};
            this. Name = Ko.observable ();
            this. Category = Ko.observable ();
            this. categories = categories;
            this. origiondata = data;
            this. Initialize (data);
        };
        Ko.utils.extend (Product.prototype, {
            Initialize:function (data) {
                this. Name (Data.name);
                This category (Data.category);
            },
            Revert:function () {
                this. Initialize (this. origiondata);
            }
        });
        New Product ({
            Name: " default value ",
            Category: " biography "
        });
        Binding
        Ko.applybindings (product);
    </script>
}

Click the "Return to initial State" button to return to the initial state of product.

 
    

  
     
 
      
Summary: Using a constructor to create a view Model, consider using data as a parameter when the number of parameters for the constructor is indeterminate.
 
     
 
    
Using the knockout Practice 03 in ASP. NET MVC, use the data parameter skillfully