Passing parameter using onclick or a click binding with KnockoutJS(使用 onclick 传递参数或使用 KnockoutJS 进行点击绑定)
问题描述
我有这个功能:
函数make(place){place.innerHTML = "东西"}
我以前用纯 JavaScript 和 html 来做这个:
<button onclick="make(this.parent)">点击我</button>
如何使用惯用的 knockout.js 做到这一点?
如果您在 Knockout 中设置了点击绑定,则事件将作为第二个参数传递.您可以使用该事件来获取发生点击的元素并执行您想要的任何操作.
这是一个演示:http://jsfiddle.net/jearles/xSKyR/
或者,您可以创建自己的自定义绑定,它将接收绑定到的元素作为第一个参数.在初始化时,您可以附加自己的点击事件处理程序来执行您希望执行的任何操作.
http://knockoutjs.com/documentation/custom-bindings.html
HTML
<button data-bind="click: clickMe">点击我!</button></div>Js
var ViewModel = function() {变种自我=这个;self.clickMe = 函数(数据,事件){var 目标 = event.target ||事件.srcElement;if (target.nodeType == 3)//消除 Safari 错误目标=目标.parentNode;target.parentNode.innerHTML = "某事";}}ko.applyBindings(new ViewModel());
I have this function:
function make(place)
{
place.innerHTML = "somthing"
}
I used to do this with plain JavaScript and html:
<button onclick="make(this.parent)">click me</button>
How can I do this using idiomatic knockout.js?
解决方案 If you set up a click binding in Knockout the event is passed as the second parameter. You can use the event to obtain the element that the click occurred on and perform whatever action you want.
Here is a fiddle that demonstrates: http://jsfiddle.net/jearles/xSKyR/
Alternatively, you could create your own custom binding, which will receive the element it is bound to as the first parameter. On init you could attach your own click event handler to do any actions you wish.
http://knockoutjs.com/documentation/custom-bindings.html
HTML
<div>
<button data-bind="click: clickMe">Click Me!</button>
</div>
Js
var ViewModel = function() {
var self = this;
self.clickMe = function(data,event) {
var target = event.target || event.srcElement;
if (target.nodeType == 3) // defeat Safari bug
target = target.parentNode;
target.parentNode.innerHTML = "something";
}
}
ko.applyBindings(new ViewModel());
这篇关于使用 onclick 传递参数或使用 KnockoutJS 进行点击绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:使用 onclick 传递参数或使用 KnockoutJS 进行点击绑
基础教程推荐
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 直接将值设置为滑块 2022-01-01