Knockoutjs 实践入门 (2) 绑定事件

Knockoutjs 绑定事件

Knockoutjs 不仅支持UI 元素的属性绑定到model的属性,还支持UI 元素的事件绑定model的事件。

 

需求:

l  click me button 每单击一次,计数器累加一次,并且把计数器次数显示到div中

l  click me button 最大可单击3次,3次过后click me button 不能使用;单击次数达到3次时,显示提示信息,并且显示reset button

l  reset button 单击后click me button 计数器清零,click me button 可用;提示信息与reset

button 消失

代码实现

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="js/knockout-3.3.0.debug.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

        <div>You've clicked <span data-bind='text: numberOfClicks'>&nbsp;</span> times</div>

        <!--button  click 事件绑定model的onclick方法 -->

        <!--button  disable属性绑定hasClickedTooManyTimes属性 -->

        <button data-bind='click: onClick, disable: hasClickedTooManyTimes'>Click me</button>

        <!--div  visible hasClickedTooManyTimes -->

        <div data-bind='visible: hasClickedTooManyTimes'>

            That's too many clicks! Please stop before you wear out your fingers.

     <!--button  click绑定resetClicks -->

            <button data-bind='click: resetClicks'>Reset clicks</button>

        </div>

    </form>

    <script type="text/javascript">

        var model = function () {

            //计数器

            this.numberOfClicks = ko.observable(0);

            //onclick方法

            this.onClick = function () {

                this.numberOfClicks(this.numberOfClicks() + 1);

            };

            //计数器重置

            this.resetClicks = function () {

                this.numberOfClicks(0);

            };

            //hasClickedTooManyTimes 属性

            this.hasClickedTooManyTimes = ko.pureComputed(function () {

                return this.numberOfClicks() >= 3;

            }, this);

        };

 

        ko.applyBindings(new model());

    </script>

</body>

</html>

运行结果

第一次click

 

第三次click

 

重置

 

posted @ 2015-05-04 19:52  b0b0  阅读(497)  评论(0编辑  收藏  举报