在ASP.NET MVC中使用Knockout實踐02，組合View Model成員、Select繫結、通過構造器建立View Model，擴充套件View Model方法

本篇體驗使用ko.computed(fn)計算、組合View Model成員、Select元素的繫結、使用構造器建立View Model、通過View Model的原型(Prototype)為View Model新增擴充套件方法。

 

□ 使用ko.computed(fn)計算成員

 

有時候，我們希望把View Model中的幾個成員組合起來成為一個新成員，使用ko.computed(fn)可實現。

接著上一篇，為productViewModel這個json物件增加一個計算成員。

 

<div data-bind="text:formatted"></div> <hr/>
<input type="text" data-bind="value:name"/>
@section scripts
{
    <script src="~/Scripts/knockout-2.2.0.js"></script>
    <script type="text/javascript">
        $(function() {
            
            $.getJSON('@Url.Action("GetFirstProduct","Home")', function (data) {
                productViewModel.name(data.Name);
                productViewModel.category(data.Category);
            });
        });
        var productViewModel = {
            id: ko.observable(""),
            name: ko.observable("初始值"),
            price: ko.observable(""),
            category: ko.observable("")
        };
        //為productViewModel增加一個計算成員
        productViewModel.formatted = ko.computed(function() {
            return productViewModel.name() + "--" + productViewModel.category();
        });
        //繫結
        ko.applyBindings(productViewModel);
    </script>

 

以上，對於在View Model中的成員，如果已經被賦予observable後，必須通過類似name()的方式獲取成員值。

 

□ Select元素的繫結

 

對於Select元素，它的options屬性應該繫結一個陣列，它的value屬性繫結一個選中值。

<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) {
                productViewModel.name(data.Name);
                productViewModel.category(data.Category);
            });
        });
        var productViewModel = {
            id: ko.observable(""),
            name: ko.observable("初始值"),
            price: ko.observable(""),
            category: ko.observable(""),
            categories: ["小說","散文","傳記"]
        };
        //為productViewModel增加一個計算成員
        productViewModel.formatted = ko.computed(function() {
            return productViewModel.name() + "--" + productViewModel.category();
        });
        //繫結
        ko.applyBindings(productViewModel);
    </script>
}

 

□ 使用構造器建立View Model

 

<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 Product = function(name, category, categories) {
            this.name = ko.observable(name);
            this.category = ko.observable(category);
            this.categories = categories;
            this.formatted = ko.computed(function() {
                return this.name() + "--" + this.category();
            }, this);
        };
        var product = new Product("預設值", "預設值", ["小說", "散文", "傳記"]);
        //繫結
        ko.applyBindings(product);
    </script>
}

 

□ 為View Model原型(Prototype)擴充套件方法

 

以上，ko.computed中使用了一個匿名函式，如果把這個匿名函式作為Product的擴充套件方法，該如何做到呢？
<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 Product = function(name, category, categories) {
            this.name = ko.observable(name);
            this.category = ko.observable(category);
            this.categories = categories;
            this.formatted = ko.computed(this.getFormatted, this);
        };
        ko.utils.extend(Product.prototype, {
            getFormatted: function() {
                return this.name() + "--" + this.category();
            }
        });
        var product = new Product("預設值", "預設值", ["小說", "散文", "傳記"]);
        //繫結
        ko.applyBindings(product);
    </script>
}

以上，通過ko.utils.extend方法，為Product的原型新增了擴充套件方法getFormatted。