Knockout.Js官网学习(监控属性Observables)
前言
1.创建一个ViewModel
<script type="text/javascript"> //1.创建一个ViewModel var myViewModel = { personName:'aehyok', personAge:25 }; </script>
2.为ViewModel创建一个声明式绑定的简单的View
The name is <span data-bind="text:personName"></span>
3.**Knockout
1
|
ko.applyBindings(myViewModel); |
4.查看运行效果
Observables监控属性
现在已经知道如何创建一个简单的view model并且通过binding显示它的属性了。但是KO一个重要的功能是当你的view model改变的时候能自动更新你的界面。当你的view model部分改变的时候KO是如何知道的呢?答案是:你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript objects,能够通知订阅者它的改变以及自动探测到相关的依赖。
例如:将上述的例子修改为
1
2
3
4
|
var myViewModel = {
personName: ko.observable( 'aehyok' ),
personAge: ko.observable(25)
}; |
你根本不需要修改view – 所有的data-bind语法依然工作,不同的是他能监控到变化,当值改变时,view会自动更新。
监控属性的读操作(read)
1
2
|
///监控属性的读操作(read) alert(myViewModel.personAge); |
监控属性的写操作(write)
1
2
|
///监控属性的写操作(write) myViewModel.personName( "aehyok-Test" );
|
Dependent Observables依赖监控属性
如果你已经有了监控属性firstName和lastName,你想显示全称怎么办? 这就需要用到依赖监控属性了 – 这些函数是一个或多个监控属性, 如果他们的依赖对象改变,他们会自动跟着改变。
例如:继续在上面的ViewModel中添加两个属性 firstName和lastName
1
2
3
4
5
6
|
var myViewModel = {
personName: ko.observable( 'aehyok' ),
personAge: ko.observable(25),
firstName: ko.observable( 'aehyok' ),
lastName: ko.observable( 'Leo' )
}; |
并且添加一个依赖监控属性,来返回姓名的全称
1
2
3
4
|
///依赖监控属性 myViewModel.fullName = ko.dependentObservable(function () { return this .firstName() + " " + this .lastName();
}, myViewModel); |
并且绑定到View视图界面上的元素
The fullname is <span data-bind="text: fullName"></span>
不管firstName还是lastName改变,全称fullName都会自动更新(不管谁改变,执行函数都会调用一次,不管改变成什么,他的值都会更新到UI或者其他依赖监控属性上)。
优化上面fullname的监控属性
1
2
3
4
|
var viewModel = {
firstName: ko.observable( "aehyok" ),
lastName:ko.observable( "Leo" )
}; |
对fullName的依赖监控属性进行调整
1
2
3
4
5
6
7
8
9
10
11
12
13
|
viewModel.fullName = ko.dependentObservable({ read:function() {
return this .firstName() + " " + this .lastName();
},
write:function(value) {
var lastSpacePos = value.lastIndexOf( " " );
if (lastSpacePos>0) {
this .firstName(value.substring(0, lastSpacePos));
this .lastName(value.substring(lastSpacePos + 1));
}
},
owner: viewModel
}); |
这个例子里,写操作的callback接受写入的值,把值分离出来,分别写入到“firstName”和“lastName”上。 你可以像普通情况一样将这个view model绑定到DOM元素上,如下:
1
2
3
|
<p>First name: <span data-bind= "text: firstName" ></span></p>
<p>Last name: <span data-bind= "text: lastName" ></span></p>
<h2>Hello, <input data-bind= "value: fullName" />!</h2>
|
然后运行在文本框上录入会看到如下效果
上面的view model演示的是通过一个简单的参数来初始化依赖监控属性。你可以给下面的属性传入任何JavaScript对象:
1. read — 必选,一个用来执行取得依赖监控属性当前值的函数。
2.write — 可选,如果声明将使你的依赖监控属性可写,别的代码如果这个可写功能写入新值,通过自定义逻辑将值再写入各个基础的监控属性上。
3.owner — 可选,如果声明,它就是KO调用read或write的callback时用到的this。
Value转换器
有时候你可能需要显示一些不同格式的数据,从基础的数据转化成显示格式。比如,你存储价格为float类型,但是允许用户编辑的字段需要支持货币单位和小数点。你可以用可写的依赖监控属性来实现,然后解析传入的数据到基本 float类型里:
1
2
3
4
5
6
7
8
9
10
|
viewModel.formattedPrice=ko.dependentObservable({ read:function () {
return "$" + this .price().toFixed(2);
},
write:function(value) {
value = parseFloat(value.replace(/[^\.\d]/g, "" ));
this .price(isNaN(value) ? 0 : value);
},
owner:viewModel
}); |
然后绑定到textbox上面
1
|
<p>Enter bid price: <input data-bind= "value: formattedPrice" /></p>
|
所以,不管用户什么时候输入新价格,输入什么格式,text box里会自动更新为带有2位小数点和货币符号的数值。这样用户可以看到你的程序有多聪明,来告诉用户只能输入2位小数,否则的话自动删除多余的位数,当然也不能输入负数,因为write的callback函数会自动删除负号。
过滤并验证用户输入
继续在上面的ViewModel中添加两个属性
1
2
3
4
5
6
7
|
var viewModel = {
firstName: ko.observable( "aehyok" ),
lastName: ko.observable( "Leo" ),
price: ko.observable(22.466),
acceptedNumericValue: ko.observable(123),
lastInputWasValid: ko.observable( true )
}; |
然后添加一个依赖监控属性
1
2
3
4
5
6
7
8
9
10
11
12
|
viewModel.attemptedValue = ko.dependentObservable({ read: viewModel.acceptedNumericValue,
write: function (value) {
if (isNaN(value)) {
this .lastInputWasValid( false );
} else {
this .lastInputWasValid( true );
this .acceptedNumericValue(value);
}
},
owner:viewModel
}); |
进行绑定View视图界面元素
1
2
|
<p>Enter a numeric value: <input data-bind= "value: attemptedValue" /></p>
<div data-bind= "visible: !lastInputWasValid()" >That's not a number!</div>
|
现在,acceptedNumericValue 将只接受数字,其它任何输入的值都会触发显示验证信息,而会更新acceptedNumericValue。