学习KnockOut第二篇之Counter
先说好了，只是学习笔记。
第一步。先写一个简单的text绑定吧。先写VM，再写激活代码，最后写V,那样V才会有智能提示。此处不多讲，上文中有写到过。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title >Ando's Counter </title>
</head>
<body>
<div >You've clicked <span data-bind="text:numberOfClick"></span > times</div >
</body>
</html>
<script src="knockout-2.3.0.js"></ script>
<script type="text/javascript">
var CounterViewModel = function() {
this.numberOfClick = ko.observable();
};
ko.applyBindings(new CounterViewModel());
</script>
text绑定
效果将会是这样：
第二步。再加一个按钮。每点一次，显示的次数就加一次。那么，就得用到click绑定了。也就是在被点击的时候执行我们定义的JavaScript函数。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title >Ando's Counter </title>
</head>
<body>
<div >You've clicked <span data-bind="text:numberOfClick"></span > times</div >
<button data-bind ="click:registerClick">Can U click me?</ button>
</body>
</html>
<script src="knockout-2.3.0.js"></ script>
<script type="text/javascript">
var CounterViewModel = function() {
this.numberOfClick = ko.observable();
//this.registerClick = this.numberOfClick(this.numberOfClick() + 1);
this.registerClick = function() {
return this.numberOfClick( this.numberOfClick() + );
};
};
ko.applyBindings(new CounterViewModel());
</script>
点击一次按钮数字就增加一次可好。click绑定。
我点击六次按钮后将会是这样：
第三步。那么，现在，有新需求了。当我们点击了五次之后就不再让用户点击，也就是让此按钮变得不能点击。那么就得用到disable绑定了。其用法也很简单，disable绑定，只有其参数值为true的时候才会disable。需要说一个的就是布尔值false,数字0，null,undefined都是假值（即false,不生效）。与disable相对应的就是enable，用法一样，实际效果正好相反。另外他因为得计算两个监控属性的值，那么还得用到computed.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title >Ando's Counter </title>
</head>
<body>
<div >You've clicked <span data-bind="text:numberOfClick"></span > times</div >
<button data-bind ="click:registerClick,disable:tooManyClicks"> Can U click me?</button>
</body>
</html>
<script src="knockout-2.3.0.js"></ script>
<script type="text/javascript">
var CounterViewModel = function() {
this.numberOfClick = ko.observable();
this.registerClick = function() {
return this.numberOfClick( this.numberOfClick() + );
};
this.tooManyClicks = ko.computed( function () {
return this.numberOfClick() >= ;
}, this);
};
ko.applyBindings(new CounterViewModel());
</script>
让按钮不能用吧。disable绑定。
看一下效果图，按钮里面字体颜色暗得不是很明显，不过真是的不能点击了，当点击次数有5次后：
既然，不让用按钮了，那么总得跟用户说一个原因吧。并且楼主你都说，按钮不能点的“暗示”不是很明显的。能不能当点击那么多次数之后，让按钮不可用，且给用户相应的信息呢。自然可以。那么我们得用到visible绑定了。加个DIV，在DIV里写点提示信息，将这个DIV绑定一下吧。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title >Ando's Counter </title>
</head>
<body>
<div >You've clicked <span data-bind="text:numberOfClick"></span > times</div >
<button data-bind ="click:registerClick,disable:tooManyClicks"> Can U click me?</button>
<div data-bind ="visible:tooManyClicks">
I think you are tired,U can have a seat now.
</div >
</body>
</html>
<script src="knockout-2.3.0.js"></ script>
<script type="text/javascript">
var CounterViewModel = function() {
this.numberOfClick = ko.observable();
this.registerClick = function() {
return this.numberOfClick( this.numberOfClick() + );
};
this.tooManyClicks = ko.computed( function () {
return this.numberOfClick() >= ;
}, this);
};
ko.applyBindings(new CounterViewModel());
</script>
来点友情提示。visible绑定。
那么当点击5次后友情提示友好的出现了：
好的呢。现在是明显的不能点击了。到这里就结束了么，你能不能给个按钮让用户重置一下呢。如果用户想重新点击的话。自然可以，依旧如是。依旧是点击事件，click绑定，只是这次是当点击此按钮时就将此上面的值变为0就好了。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title >Ando's Counter </title>
</head>
<body>
<div >You've clicked <span data-bind="text:numberOfClick"></span > times</div >
<button data-bind ="click:registerClick,disable:tooManyClicks"> Can U click me?</button>
<div data-bind ="visible:tooManyClicks">
I think you are tired,U can have a seat now.
<button data-bind="click:resetClick"> Reset</ button>
</div >
</body>
</html>
<script src="knockout-2.3.0.js"></ script>
<script type="text/javascript">
var CounterViewModel = function () {
this.numberOfClick = ko.observable();
this.registerClick = function () {
return this.numberOfClick( this.numberOfClick() + );
};
this.tooManyClicks = ko.computed( function () {
return this.numberOfClick() >= ;
}, this);
this.resetClick = function() {
return this.numberOfClick();
};
};
ko.applyBindings(new CounterViewModel());
</script>
重置按钮，再现一次click绑定
此处不太好给图，当点击Reset的时候它真的就回到第一个图那里去了，不信你可以试试，此处无图亦有真相。
楼主，你这个明明就是看官网的例子，然后做了一点自己的分解，你也好意思挂到博客园上来。
是的呢，楼主初涉，只有在官网上学习下了。做点分解，记下笔记，加深印象，让你见笑了。
见笑且不说，那么，现在我就有一个需求，看你能不能做出来。
你且说先。
就是刚才你也说了，那个不能点击的按钮不能点的不是很明显，尽管后面有了友情提示和重置按钮。你能不能当点击到一定次数后就让按钮上的字也改变一下呢。
比如就写上“我不能被点到了”或者“你不能点击我了”，诸如此类的字呢，这样么？
正是此意。
那容我试试。
楼主想了会，我们可以用span标签将此按钮里的字体data-bind一下，给之一个初始值，在初始化ViewModel的时候。在计算监控属性的时候，做一个判断，如果监控numberOfClick()的值大于等于5则返回一个你想改变的值就好了。当然不要忘了，当点击重置按钮时，也要重写一个按钮里字的值。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title >Ando's Counter </title>
</head>
<body>
<div >You've clicked <span data-bind="text:numberOfClick"></span > times</div >
<button data-bind ="click:registerClick,disable:tooManyClicks">< span data-bind="text:buttonText"></span ></button>
<div data-bind ="visible:tooManyClicks">
I think you are tired,U can have a seat now.
<button data-bind="click:resetClick"> Reset</ button>
</div >
</body>
</html>
<script src="knockout-2.3.0.js"></ script>
<script type="text/javascript">
var CounterViewModel = function () {
this.numberOfClick = ko.observable();
this.buttonText = ko.observable( "Can U click me?");
this.registerClick = function () {
return this.numberOfClick( this.numberOfClick() + );
};
this.tooManyClicks = ko.computed( function () {
this.numberOfClick() >= ;
if ( this.numberOfClick() >= ) {
return this.buttonText( "U can not click me now");
}
}, this);
this.resetClick = function() {
this.numberOfClick();
this.buttonText( "Can U click me?");
};
};
ko.applyBindings(new CounterViewModel());
</script>
按钮里的字也请楼主动态绑定。
附图一张：
第二篇学习笔记到此结束。 欢迎斧正。