在ASP.NET MVC中使用Knockout实践03，巧用data参数

使用Knockout，当通过构造函数创建View Model的时候，构造函数的参数个数很可能是不确定的，于是就有了这样的一个解决方案：向构造函数传递一个object类型的参数data。

 

<input data-bind="value: name"/><hr/>

<select data-bind="options: categories, value: category" ></select><hr/>

@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 = ["小说", "散文", "传记"];

        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);

            }

        });

        var product = new Product({

            name: "默认值",

            category: "传记"

        });

        //绑定

        ko.applyBindings(product);

    </script>

}

以上，通过构造函数创建Product的时候，只用到了一个参数，data。在实例化Product的时候，给Product各个成员赋默认值。另外，还为Product的原型添加了一个扩展方法，用于初始化。

 

当页面加载完毕，向控制器发送异步请求，返回给Product的值不是初始值。

 

如果想返回到Product初始值的状态，如何做到呢？

 

可以分3步完成：
1、给Product增加一个属性origionData，用来存放初始状态
2、给Product的原型添加一个扩展方法，用来返回到初始状态，即把origionData属性值作为初始化方法的参数
3、在页面上添加一个按钮，绑定Product的扩展方法

 

 

<input data-bind="value: name"/><hr/>

<select data-bind="options: categories, value: category" ></select><hr/>

<button data-bind="click:revert">返回初始状态</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 = ["小说", "散文", "传记"];

        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);

            }

        });

        var product = new Product({

            name: "默认值",

            category: "传记"

        });

        //绑定

        ko.applyBindings(product);

    </script>

}

点击"返回初始状态"按钮，回到Product的初始状态。

 

总结：使用构造函数创建View Model，当构造函数的参数数量不确定的情况下，可考虑使用data作为参数。