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