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