在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。