首页 > 代码库 > 在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法
在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="http://www.mamicode.com/~/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="http://www.mamicode.com/~/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="http://www.mamicode.com/~/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="http://www.mamicode.com/~/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。
在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。