click: <binding-function>
Click绑定是最简单的绑定之一,用于根据单击调用与DOM元素关联的JavaScript函数。 此绑定的作用类似于事件处理程序。
这最常用于button , input和a等元素,但实际上适用于任何可见的DOM元素。
Syntax
click: <binding-function>
Parameters
这里的参数是一个JavaScript函数,需要根据点击调用。 这可以是任何函数,不必是ViewModel函数。
Example
让我们看一下下面的例子,它演示了点击绑定的用法。
<!DOCTYPE html>
<head>
<title>KnockoutJS Click Binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<p>Enter your name: <input data-bind = "value: someValue" /></p>
<p><button data-bind = "click: showMessage">Click here</button></p>
<script type = "text/javascript">
function ViewModel () {
this.someValue = ko.observable();
this.showMessage = function() {
alert("Hello "+ this.someValue()+ "!!! How are you today?"+
"\nClick Binding is used here !!!");
}
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Output
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在click-bind.htm文件中。
在浏览器中打开此HTML文件。
单击“单击此处”按钮,屏幕上将显示一条消息。
观察 (Observations)
Current Item也可以作为参数传递
当调用处理程序函数时,还可以提供当前模型值作为参数。 这在处理数据集合时很有用,其中需要对一组项目执行相同的操作。
Example
让我们看一下下面的例子来更好地理解它。
<!DOCTYPE html>
<head>
<title>KnockoutJS Click binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<p>List of product details:</p>
<ul data-bind = "foreach: productArray ">
<li>
<span data-bind = "text: productName"></span>
<a href = "#" data-bind = "click: $parent.removeProduct">Remove </a>
</li>
</ul>
<script type = "text/javascript">
function AppViewModel() {
self = this;
self.productArray = ko.observableArray ([
{productName: 'Milk'},
{productName: 'Oil'},
{productName: 'Shampoo'}
]);
self.removeProduct = function() {
self.productArray.remove(this);
}
};
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Output
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在click-for-current-item.htm文件中。
在浏览器中打开此HTML文件。
每次单击“删除”链接时都会调用removeProduct函数,并在数组中为该特定项调用该函数。
请注意,$ parent绑定上下文用于到达处理函数。
传递更多参数
DOM事件以及当前模型值也可以传递给处理函数。
Example
让我们看一下下面的例子来更好地理解它。
<!DOCTYPE html>
<head>
<title>KnockoutJS Click Binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<p>Press Control key + click below button.</p>
<p><button data-bind = "click: showMessage">Click here to read message</button></p>
<script type = "text/javascript">
function ViewModel () {
this.showMessage = function(data,event) {
alert("Click Binding is used here !!!");
if (event.ctrlKey) {
alert("User was pressing down the Control key.");
}
}
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Output
让我们执行以下步骤来查看上述代码的工作原理 -
将上面的代码保存在click-bind-more-params.htm文件中。
在浏览器中打开此HTML文件。
通过此绑定捕获控制键的按下。
允许默认单击操作
KnockoutJS默认情况下阻止click事件执行任何默认操作。 这意味着如果在《a》标记上使用了Click绑定,那么浏览器将只调用处理函数,并且实际上不会将您带到href中提到的链接。
如果您希望在单击绑定中执行默认操作,则只需要从处理函数返回true。
Example
让我们看一下下面的示例,该示例演示了单击绑定执行的默认操作。
<!DOCTYPE html>
<head>
<title>KnockoutJS Click Binding - allowing default action</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<a href = "https://www.xnip.cn//" target = "_blank"
data-bind = "click: callUrl">Click here to see how default
Click binding works.
</a>
<script type = "text/javascript">
function ViewModel() {
this.callUrl = function() {
alert("Default action in Click Binding is allowed here !!!
You are redirected to link.");
return true;
}
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Output
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在click-default-bind.htm文件中。
在浏览器中打开此HTML文件。
单击该链接,屏幕上将显示一条消息。 href中提到的URL在新窗口中打开。
防止事件冒泡
KO将允许click事件冒泡到更高级别的事件处理程序。 这意味着如果您有2个嵌套的单击事件,则将调用它们的单击处理函数。 如果需要,可以通过添加一个名为clickBubble的额外绑定并将false值传递给它来防止这种冒泡。
Example
让我们看一下下面的例子,它演示了clickBubble绑定的用法。
<!DOCTYPE html>
<head>
<title>KnockoutJS Click Binding - handling clickBubble</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<div data-bind = "click: outerFunction">
<button data-bind = "click: innerFunction, clickBubble:false">
Click me to see use of clickBubble.
</button>
</div>
<script type = "text/javascript">
function ViewModel () {
this.outerFunction = function() {
alert("Handler function from Outer loop called.");
}
this.innerFunction = function() {
alert("Handler function from Inner loop called.");
}
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Output
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在click-cllickbubble-bind.htm文件中。
在浏览器中打开此HTML文件。
单击按钮,观察添加具有值false的clickBubble绑定可防止事件超过innerFunction。