在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作為引數。