计算属性

实际应用中,我们通常需要对数据进行加工

如: 指定日期格式,将数字相加... 等,此时可使用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 的使用的更多相关文章

  1. MVC MVVM Knockout viewmodel 提交 完整过程,包含序列化 JSON 和 字典模型绑定

    //JSON 通用操作------------------------------------------------------------------------------using Syste ...

  2. (四 )Knockout - ViewModel 的使用3 - 对象属性变化的实时更新

    ko.observableArray()就可以自动检测属性,其实他只是监控对象,而不是对象中的属性 使用ko.observable()进行处理 DEMO1 实时更新属性 //定义user数据对象 va ...

  3. (三)Knockout - ViewModel 的使用2 - select、list 应用

    select下拉菜单 <select>常用的data-bind参数: •options : 指向数组或ko.observableArray(),KO会将数组元素转换为下拉选项.如果是ko. ...

  4. .NET MVC4 数据验证Model(二)

      一.概述 MVC分为ViewModel.Control.View,对数据的封装MVC做的很好,确实是不错的WEB框架,针对MVC的ViewModel封装的也是相当的不错,最近做一个MVC的项目,采 ...

  5. ContentControl 与 ViewModel (一)

    前阵子有人问我MVVM模式下,在View中嵌套View,切换View.想一想还是写下来吧. 主要就是用到 ContentControl 和 DataTemplate,这算是一种 ViewModel F ...

  6. Knockout Grid - Loading Remote Data

    http://wijmo.com/grid-with-knockout-viewmodel-loading-remote-data/ We were hearing quite a few peopl ...

  7. Android框架式编程之ViewModel

    一.ViewModel介绍 ViewModel类是被设计用来以可感知生命周期的方式存储和管理 UI 相关数据.ViewModel中数据会一直存活即使 Activity Configuration发生变 ...

  8. 使用MVVM设计模式构建WPF应用程序

    使用MVVM设计模式构建WPF应用程序 本文是翻译大牛Josh Smith的文章,WPF Apps With The Model-View-ViewModel Design Pattern,译者水平有 ...

  9. 小记:iOS 中一般对于 view 不依赖 model 的的两种代码书写形式

    一. 前言 对于在 MVC 的定义中,view 层是不引用 model 层,view 和 model 是不相往来的 一般开发中,我们都写过 在自定义 view 中增加一个 model 的属性,外接直接 ...

随机推荐

  1. Solr4.8.0源码分析(9)之Lucene的索引文件(2)

    Solr4.8.0源码分析(9)之Lucene的索引文件(2) 一. Segments_N文件 一个索引对应一个目录,索引文件都存放在目录里面.Solr的索引文件存放在Solr/Home下的core/ ...

  2. CentOS 6.x 下Postfix和dovecot邮件服务安装和基本配置

    1 卸载sendmail [root@mail~]# pstree | grep sendmail [root@mail~]# service sendmail stop [root@mail~]# ...

  3. Common Subsequence

    #include<cstdio> #include<iostream> #include<cmath> #include<string> #includ ...

  4. 一步一步学习SignalR进行实时通信_7_非代理

    原文:一步一步学习SignalR进行实时通信_7_非代理 一步一步学习SignalR进行实时通信\_7_非代理 SignalR 一步一步学习SignalR进行实时通信_7_非代理 前言 代理与非代理 ...

  5. VS中的预先生成事件和后期生成事件

    原文:VS中的预先生成事件和后期生成事件 在C#开发中,有时候需要在程序编译之前或之后做一些操作. 要达到这个目的,可以使用Visual Studio中的预先生成事件和后期生成事件. 下图是一个简单例 ...

  6. BZOJ2749: [HAOI2012]外星人

    2749: [HAOI2012]外星人 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 377  Solved: 199[Submit][Status] ...

  7. 【转】深层次探讨mutex与semaphore之间的区别(下)

    原文网址:http://blog.chinaunix.net/uid-23769728-id-3173282.html 这篇博文很长,虽然这是下篇,但还没结束,benchmark方面的东西正在进行中, ...

  8. Xamarin Crack

    Inspired by http://www.cnblogs.com/portal/p/4666252.html#undefined To 'crack' VS Xamarin, take VS201 ...

  9. HDU_2544——最短路,Dijkstra模版

    Problem Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要 ...

  10. 黑魔法__attribute__((cleanup))

    原文地址:http://blog.sunnyxx.com/2014/09/15/objc-attribute-cleanup/ 编译器属性__attribute__用于向编译器描述特殊的标识.检查或优 ...