在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。
在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法的更多相关文章
- 在ASP.NET MVC中使用Knockout实践01,绑定Json对象
本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库.最后让Knockout绑定一个Json对象. 创建一个领域模型. namespace MvcAppl ...
- 在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合
本篇体验使用 foreach 绑定一个Product集合. 首先使用构造创建一个View Model. var Product = function(data) { this.name = ko.ob ...
- 在ASP.NET MVC中使用Knockout实践05,基本验证
本篇体验View Model验证.Knockout的subscribe方法能为View Model成员注册验证规则. @{ ViewBag.Title = "Index"; Lay ...
- 在ASP.NET MVC中使用Knockout实践09,自定义绑定
Knockout真正强大之处在于绑定机制,通过data-bind属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定. 从一个例子看Knockou的绑定机制 假设想给一个button元素 ...
- 在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容
在前两篇中,体验了Knockout的基本验证和自定义验证.本篇自定义验证信息的显示位置与内容. 自定义验证信息的显示位置 通常,Knockout的验证信息紧跟在input后面,通过validation ...
- 在ASP.NET MVC中使用Knockout实践06,自定义验证、异步验证
在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证. 自定义验证规则 ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集 ...
- 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容
通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成 ...
- 在ASP.NET MVC中使用Knockout实践03,巧用data参数
使用Knockout,当通过构造函数创建View Model的时候,构造函数的参数个数很可能是不确定的,于是就有了这样的一个解决方案:向构造函数传递一个object类型的参数data. <inp ...
- 关于ASP.NET MVC中Response.Redirect和RedirectToAction的BUG (跳转后继续执行后面代码而不结束进程)以及处理方法
关于ASP.NET MVC中Response.Redirect和RedirectToAction的BUG (跳转后继续执行后面代码而不结束进程)以及处理方法 在传统的ASP.NET中,使用Resp ...
随机推荐
- Java 在方法和作用域内的内部类
通常,如果所读写 的代码包含了内部类,那么它们都是"平凡的"内部类,简单并且容易理解,然而,内部类的语法覆盖了大量其它的更加难以理解的计数,例如可以在一个方法里或者在任意的作用域里 ...
- (一)Dubbo简介
Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和Spring框架无缝集成.具体可以看 百度百科 https://baike.ba ...
- 001_Eclipse编写第一个Java程序
1 下载并安装jdk 2 下载较新版本的eclipse,eclipse都是非安装版的,解压缩即可. 3 双击eclipse.exe,打开elipse软件 4 FileàNewàProject 5 选择 ...
- Maximum Shortest Distance 最大团 二分答案 HDU 3585
题意:给出n个点 要求取k个点 这k个点中 距离最小的两个点要求距离最大 拿到手看不出是最大团 也看不出是二分答案(第一次用) 因为答案必然存在 一定有一个最值 所以用二分答案来做 最大距 ...
- ResourceBundle.getBundle方法demo
这个参考链接 http://blog.csdn.net/tgyman/article/details/56012706
- word2013 如何设置从第三页开始编码 或 如何设置封面页和正文页页码不连续
首先说明一下 “分节符”作用,它就是用来将整个文档分节的,添加一个分节符,文档就分成1.2两节:添加两个分节符,文档就分成1.2.3节. 当前页面具体是第几节,可以通过点击页眉页脚来查看: 从第三页开 ...
- JS代码浏览器兼容性 之 new Date()
这里只测试3个浏览器的情况:IE, 火狐,谷歌. 一. 无参 //无参 var dateTime = new Date(); 所有浏览器都兼容,GOOD 二. 日期参数 //日期参数 格式1 var ...
- 001.SSH配置文件
一 ssh配置文件路径 1.1 ssh客户端配置文件: 路径:/etc/ssh/ssh_config 1.2 ssh服务端配置文件: 路径:/etc/ssh/sshd_config 二 服务器端常用配 ...
- 利用angular指令监听ng-repeat渲染完成后执行脚本
业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-r ...
- Redis 的线程模型
redis 内部使用文件事件处理器 file event handler,这个文件事件处理器是单线程的,所以 redis 才叫做单线程的模型.它采用 IO 多路复用机制同时监听多个 socket,根据 ...