KnockOut绑定

KnockOut绑定之Click绑定

Click绑定对DOM元素添加一个函数，当DOM元素被点击的时候调用。在button,input 或者a标签中常用，但其实他适用于任何可见的DOM元素。

　　 example(click绑定)

@{
Layout = null;
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>

<script type="text/javascript">
var viewModel = {
numberOfClicks: ko.observable(0),
incrementClickCounter: function () {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
};
ko.applyBindings(viewModel);
</script>

@{
    Layout = null;
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<div>
    You've clicked <span data-bind="text: numberOfClicks"></span> times
    <button data-bind="click: incrementClickCounter">Click me</button>
</div>

<script type="text/javascript">
    var viewModel = {
        numberOfClicks: ko.observable(0),
        incrementClickCounter: function () {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };
    ko.applyBindings(viewModel);
</script>

每当你点击button按钮的时候，viewModel 里面的incrementClickCounter() 函数被调用，然后更新 numberOfClicks 的值，然后更新界面

我们可以调用任何javaScript函数，可以不在view model里面，也可以以someObject.someFunction的形式调用函数。

example(传递本身绑定值作为参数)

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>

<ul data-bind="foreach: places">
<li>
<!--foreach里面上下文是每一个place,可以用$data来表示当前项的值-->
<span data-bind="text: $data"></span>
<!--这儿也在foreach里面，所以click绑定对应的上下文也是$data,然后用$parent来调用其父项目，也就是viewModel，然后调用里面的removePlace函数-->
<button data-bind="click: $parent.removePlace">Remove</button>
</li>
</ul>

<script type="text/javascript">
function MyViewModel() {
var self = this;
self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
//当前项的值会被传递过来作为第一个参数，所以我们知道数组里面的哪一项被移除
self.removePlace = function (place) {
self.places.remove(place)
}
}
ko.applyBindings(new MyViewModel());
</script>

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>

<ul data-bind="foreach: places">
    <li>
        <!--foreach里面上下文是每一个place,可以用$data来表示当前项的值-->
        <span data-bind="text: $data"></span>
        <!--这儿也在foreach里面，所以click绑定对应的上下文也是$data,然后用$parent来调用其父项目，也就是viewModel，然后调用里面的removePlace函数-->
        <button data-bind="click: $parent.removePlace">Remove</button>
    </li>
</ul>

<script type="text/javascript">
    function MyViewModel() {
        var self = this;
        self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
        //当前项的值会被传递过来作为第一个参数，所以我们知道数组里面的哪一项被移除
        self.removePlace = function (place) {
            self.places.remove(place)
        }
    }
    ko.applyBindings(new MyViewModel());
</script>

在这个例子中有两点要注意：

• 如果是在一个嵌套的绑定上下文，例如在一个foreach绑定，或者with块绑定，但是你要调用viewmodel下面的函数，这时候你需要一个调用当前节点的父节点，或者直接调用根节点去访问需要调用的函数，语法父节点用$parent，根节点用$root;
• viewmodel里面用把this用一个self变量表示，相当于this的别名，防止在一些情况下引起的作用域链混乱；

example(把事件传递给click调用的函数)

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<button data-bind="click: myFunction">点击</button>
<script type="text/javascript">
var viewModel = {
//这儿的data,就是上个例子中我们传递过去绑定上下文的值
myFunction: function (data, event) {
if (event.shiftKey) {
//这儿对于click事件来说一般用不到，因为已经确定是click 事件了。
alert("shift");
} else {
//执行点击时操作
alert("normal");
}
}
};
ko.applyBindings(viewModel);
</script>

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<button data-bind="click: myFunction">点击</button>
<script type="text/javascript">
    var viewModel = {
        //这儿的data,就是上个例子中我们传递过去绑定上下文的值
        myFunction: function (data, event) {
            if (event.shiftKey) {
                //这儿对于click事件来说一般用不到，因为已经确定是click 事件了。
                alert("shift");
            } else {
                //执行点击时操作
                alert("normal");
            }
        }
    };
    ko.applyBindings(viewModel);
</script>

这个例子展示了给把事件句柄传递给函数，其中data指的是绑定上下文的值，其实也是指上个例子中的place

example(传递任意参数给调用函数)

如果你想传任意的参数给调用函数，你可以用一个函数字面量来作为一个参数，意思就是说，click后面你可以传递任何javascript变量，因为javascript语法的特殊形式，一个函数也能作为变量传递，所以可以直接在click后面写一个匿名函数，然后在该函数里面直接调用你想到调用的函数，同时把参数传递过去。

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<button data-bind="click: myFunction">点击</button>
<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
Click me
</button>
<script type="text/javascript">
var viewModel = {
myFunction: function (parameter1, parameter2, parameter3, parameter4) {
}
};
ko.applyBindings(viewModel);
</script>

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<button data-bind="click: myFunction">点击</button>
<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
    Click me
</button>
<script type="text/javascript">
    var viewModel = {
        myFunction: function (parameter1, parameter2, parameter3, parameter4) {
        }
    };
    ko.applyBindings(viewModel);
</script>

除了用函数字面量的这种办法，我们还可以用另一种办法，用knockout的绑定函数，语法为函数名.bing(里面可以传递参数);

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
    Click me
</button>

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
    Click me
</button>

阻止DOM元素的默认事件

默认情况下，当你对一个DOM元素绑定一个click事件后，当你点击的时候，他只会执行你的click事件，不会执行该DOM元素的默认事件。例如a标签，当你给他绑定了一个事件后，点击，执行绑定事件，但是他不会跳转该a标签指向的连接，如果你想让它继续执行，可以返回一个true;

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>

<a href="http://www.cnblogs.com/santian/" data-bind="click: myFunction.bind($data, 'param1', 'param2')">
Click me
</a>
<script type="text/javascript">
var viewModel = {
myFunction: function (parameter1, parameter2, parameter3, parameter4) {
alert(1);
//这儿如果你不return true,就不会跳转
//return true;
}
};
ko.applyBindings(viewModel);
</script>

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>

<a href="http://www.cnblogs.com/santian/" data-bind="click: myFunction.bind($data, 'param1', 'param2')">
    Click me
</a>
<script type="text/javascript">
    var viewModel = {
        myFunction: function (parameter1, parameter2, parameter3, parameter4) {
            alert(1);
            //这儿如果你不return true,就不会跳转
            //return true;
        }
    };
    ko.applyBindings(viewModel);
</script>

阻止事件冒泡

阻止事件冒泡，用如下语法

<div data-bind="click: myDivHandler">
    <button data-bind="click: myButtonHandler, clickBubble: false">
        Click me
    </button>
</div>

<div data-bind="click: myDivHandler">
    <button data-bind="click: myButtonHandler, clickBubble: false">
        Click me
    </button>
</div>

作者：一天两天三天

本文地址：http://www.cnblogs.com/santian/p/4345218.html

博客地址：http://www.cnblogs.com/santian/

转载请以超链接形式标明文章原始出处。