使用onclick或与KnockoutJS的点击绑定传递参数
我有这个function：
function make(place) { place.innerHTML = "somthing" } 我曾经用普通的JavaScript和html做到这一点：
<button onclick="make(this.parent)">click me</button>
我该如何使用惯用的knockout.js来做到这一点？
如果您在Knockout中设置了一个点击绑定，则该事件将作为第二个parameter passing。 您可以使用该事件来获取发生点击的元素，并执行所需的任何操作。
这是一个小提琴演示： http : //jsfiddle.net/jearles/xSKyR/
或者，您可以创build自己的自定义绑定，它将接收绑定的元素作为第一个参数。 在初始化你可以附加你自己的点击事件处理程序来执行任何你想要的操作。
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());
使用一个绑定，就像在这个例子中一样：
<a href="#new-search" data-bind="click:SearchManager.bind($data,'1')"> Search Manager </a>
var ViewModelStructure = function () { var self = this; this.SearchManager = function (search) { console.log(search); }; }();
我知道这是一个古老的问题，但这是我的贡献。 而不是所有这些技巧，你可以简单地包装一个函数在另一个函数。 就像我在这里所做的那样：
<div data-bind="click: function(){ f('hello parameter'); }">Click me once</div> <div data-bind="click: function(){ f('no no parameter'); }">Click me twice</div> var VM = function(){ this.f = function(param){ console.log(param); } } ko.applyBindings(new VM());
这是小提琴
关于如何处理KnockoutJS的click事件的一般答案…
不是直接回答所问的问题，而是大多数Google员工在这里登陆的问题的答案：使用KnockoutJS的click绑定而不是onclick 。 喜欢这个：
function Item(parent, txt) { var self = this; self.doStuff = function(data, event) { console.log(data, event); parent.log(parent.log() + "\n data = " + ko.toJSON(data)); }; self.doOtherStuff = function(customParam, data, event) { console.log(data, event); parent.log(parent.log() + "\n data = " + ko.toJSON(data) + ", customParam = " + customParam); }; self.txt = ko.observable(txt); } function RootVm(items) { var self = this; self.doParentStuff = function(data, event) { console.log(data, event); self.log(self.log() + "\n data = " + ko.toJSON(data)); }; self.items = ko.observableArray([ new Item(self, "John Doe"), new Item(self, "Marcus Aurelius") ]); self.log = ko.observable("Started logging..."); } ko.applyBindings(new RootVm());
.parent { background: rgba(150, 150, 200, 0.5); padding: 2px; margin: 5px; } button { margin: 2px 0; font-family: consolas; font-size: 11px; } pre { background: #eee; border: 1px solid #ccc; padding: 5px; }
<script src="ajax/libs/knockout/3.4.0/knockout-min.js"></script> <div data-bind="foreach: items"> <div class="parent"> <span data-bind="text: txt"></span><br> <button data-bind="click: doStuff">click: doStuff</button><br> <button data-bind="click: $parent.doParentStuff">click: $parent.doParentStuff</button><br> <button data-bind="click: $root.doParentStuff">click: $root.doParentStuff</button><br> <button data-bind="click: function(data, event) { $parent.log($parent.log() + '\n data = ' + ko.toJSON(data)); }">click: function(data, event) { $parent.log($parent.log() + '\n data = ' + ko.toJSON(data)); }</button><br> <button data-bind="click: doOtherStuff.bind($data, 'test 123')">click: doOtherStuff.bind($data, 'test 123')</button><br> <button data-bind="click: function(data, event) { doOtherStuff('test 123', $data, event); }">click: function(data, event) { doOtherStuff($data, 'test 123', event); }</button><br> </div> </div> Click log: <pre data-bind="text: log"></pre>
Knockout的文档还提到了一个更简洁的方法，通过使用function.bind来像这样将额外的parameter passing给使用on-click绑定绑定的函数：
<button data-bind="click: myFunction.bind($data, 'param1', 'param2')"> Click me </button>
