(二)Knockout - ViewModel 的使用
计算属性
实际应用中,我们通常需要对数据进行加工
如: 指定日期格式,将数字相加... 等,此时可使用ko.computed()。当数据发生改变是,KO会使用computed重新计算
DEMO1
更改firstName,lastName值后改变fullName
var AppViewModel = function() {
var me = this;
me.firstName = ko.observable('Bob');
me.lastName = ko.observable('Smith');
me.fullName = ko.computed(function () {
return me.firstName() + " " + me.lastName();
}, this);
}
ko.applyBindings(new AppViewModel());
绑定到View上
<p>First name: <input data-bind="value: firstName"/></p>
<p>Last name: <input data-bind="value: lastName"/></p>
<h2>Hello, <span data-bind="text: fullName"/>!</h2>
DEMO2
修改fullName,从而更新firstName,lastName的值
<p>First name: <input data-bind="value: firstName"/></p>
<p>Last name: <input data-bind="value: lastName"/></p>
<h2>Hello, <span data-bind="value: fullName"/>!</h2>
self.fullName = ko.computed({
read: function () {
return me.firstName() + " " + me.lastName();
},
write: function (value) {
var lastSpacePos = value.lastIndexOf(" ");
if (lastSpacePos > 0) { // Ignore values with no space character
me.firstName(value.substring(0, lastSpacePos)); // Update "firstName"
me.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"
}
},
owner: me
});
DEMO3
金额格式的自动转换(包括精度和格式)已经垃圾字符的过滤
<p>Enter bid price: <input data-bind="value: formattedPrice"/></p><br/>
var parseModel = function() {
var me = this;
me .price = ko.observable(25.99);
me .formattedPrice = ko.computed({
read: function() {
return '$' + me.price().toFixed(2);
},
write: function(val) {
val = parseFloat(value.replace(/[^\.\d]/g, ""));
me.price(isNaN(val ) ? 0 : val );
},
owner: me
}); };
ko.applyBindings(new parseModel());
DEMO4
过滤并验证用户输入
<p>Enter a numeric value: <input data-bind="value: attemptedValue"/>
<span data-bind="visible:lastInputWasValid()">验证通过</span>
</p>
var MyViewModel = function() {
var me = this;
me.acceptedNumericValue = ko.observable(123);
me.lastInputWasValid = ko.observable(true); me.attemptedValue = ko.computed({
read: me.acceptedNumericValue,
write: function (value) {
if (isNaN(value))
me.lastInputWasValid(false);
else {
me.lastInputWasValid(true);
me.acceptedNumericValue(value); // Write to underlying storage
}
},
owner: me
});
} ko.applyBindings(new MyViewModel());
(二)Knockout - ViewModel 的使用的更多相关文章
- MVC MVVM Knockout viewmodel 提交 完整过程,包含序列化 JSON 和 字典模型绑定
//JSON 通用操作------------------------------------------------------------------------------using Syste ...
- (四 )Knockout - ViewModel 的使用3 - 对象属性变化的实时更新
ko.observableArray()就可以自动检测属性,其实他只是监控对象,而不是对象中的属性 使用ko.observable()进行处理 DEMO1 实时更新属性 //定义user数据对象 va ...
- (三)Knockout - ViewModel 的使用2 - select、list 应用
select下拉菜单 <select>常用的data-bind参数: •options : 指向数组或ko.observableArray(),KO会将数组元素转换为下拉选项.如果是ko. ...
- .NET MVC4 数据验证Model(二)
一.概述 MVC分为ViewModel.Control.View,对数据的封装MVC做的很好,确实是不错的WEB框架,针对MVC的ViewModel封装的也是相当的不错,最近做一个MVC的项目,采 ...
- ContentControl 与 ViewModel (一)
前阵子有人问我MVVM模式下,在View中嵌套View,切换View.想一想还是写下来吧. 主要就是用到 ContentControl 和 DataTemplate,这算是一种 ViewModel F ...
- Knockout Grid - Loading Remote Data
http://wijmo.com/grid-with-knockout-viewmodel-loading-remote-data/ We were hearing quite a few peopl ...
- Android框架式编程之ViewModel
一.ViewModel介绍 ViewModel类是被设计用来以可感知生命周期的方式存储和管理 UI 相关数据.ViewModel中数据会一直存活即使 Activity Configuration发生变 ...
- 使用MVVM设计模式构建WPF应用程序
使用MVVM设计模式构建WPF应用程序 本文是翻译大牛Josh Smith的文章,WPF Apps With The Model-View-ViewModel Design Pattern,译者水平有 ...
- 小记:iOS 中一般对于 view 不依赖 model 的的两种代码书写形式
一. 前言 对于在 MVC 的定义中,view 层是不引用 model 层,view 和 model 是不相往来的 一般开发中,我们都写过 在自定义 view 中增加一个 model 的属性,外接直接 ...
随机推荐
- Solr4.8.0源码分析(9)之Lucene的索引文件(2)
Solr4.8.0源码分析(9)之Lucene的索引文件(2) 一. Segments_N文件 一个索引对应一个目录,索引文件都存放在目录里面.Solr的索引文件存放在Solr/Home下的core/ ...
- CentOS 6.x 下Postfix和dovecot邮件服务安装和基本配置
1 卸载sendmail [root@mail~]# pstree | grep sendmail [root@mail~]# service sendmail stop [root@mail~]# ...
- Common Subsequence
#include<cstdio> #include<iostream> #include<cmath> #include<string> #includ ...
- 一步一步学习SignalR进行实时通信_7_非代理
原文:一步一步学习SignalR进行实时通信_7_非代理 一步一步学习SignalR进行实时通信\_7_非代理 SignalR 一步一步学习SignalR进行实时通信_7_非代理 前言 代理与非代理 ...
- VS中的预先生成事件和后期生成事件
原文:VS中的预先生成事件和后期生成事件 在C#开发中,有时候需要在程序编译之前或之后做一些操作. 要达到这个目的,可以使用Visual Studio中的预先生成事件和后期生成事件. 下图是一个简单例 ...
- BZOJ2749: [HAOI2012]外星人
2749: [HAOI2012]外星人 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 377 Solved: 199[Submit][Status] ...
- 【转】深层次探讨mutex与semaphore之间的区别(下)
原文网址:http://blog.chinaunix.net/uid-23769728-id-3173282.html 这篇博文很长,虽然这是下篇,但还没结束,benchmark方面的东西正在进行中, ...
- Xamarin Crack
Inspired by http://www.cnblogs.com/portal/p/4666252.html#undefined To 'crack' VS Xamarin, take VS201 ...
- HDU_2544——最短路,Dijkstra模版
Problem Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要 ...
- 黑魔法__attribute__((cleanup))
原文地址:http://blog.sunnyxx.com/2014/09/15/objc-attribute-cleanup/ 编译器属性__attribute__用于向编译器描述特殊的标识.检查或优 ...