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?
This question is related to
javascript
html
knockout.js
onclick
Knockout's documentation also mentions a much cleaner way of passing extra parameters to functions bound using an on-click binding using function.bind like this:
<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
Click me
</button>
I know this is an old question, but here is my contribution. Instead of all these tricks, you can just simply wrap a function inside another function. Like I have done here:
<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());
And here is the fiddle
Use a binding, like in this example:
<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);
};
}();
A generic answer on how to handle click events with KnockoutJS...
Not a straight up answer to the question as asked, but probably an answer to the question most Googlers landing here have: use the click binding from KnockoutJS instead of onclick. Like this:
function Item(parent, txt) {_x000D_
var self = this;_x000D_
_x000D_
self.doStuff = function(data, event) {_x000D_
console.log(data, event);_x000D_
parent.log(parent.log() + "\n data = " + ko.toJSON(data));_x000D_
};_x000D_
_x000D_
self.doOtherStuff = function(customParam, data, event) {_x000D_
console.log(data, event);_x000D_
parent.log(parent.log() + "\n data = " + ko.toJSON(data) + ", customParam = " + customParam);_x000D_
};_x000D_
_x000D_
self.txt = ko.observable(txt);_x000D_
}_x000D_
_x000D_
function RootVm(items) {_x000D_
var self = this;_x000D_
_x000D_
self.doParentStuff = function(data, event) {_x000D_
console.log(data, event);_x000D_
self.log(self.log() + "\n data = " + ko.toJSON(data));_x000D_
};_x000D_
_x000D_
self.items = ko.observableArray([_x000D_
new Item(self, "John Doe"),_x000D_
new Item(self, "Marcus Aurelius")_x000D_
]);_x000D_
self.log = ko.observable("Started logging...");_x000D_
}_x000D_
_x000D_
ko.applyBindings(new RootVm());.parent { background: rgba(150, 150, 200, 0.5); padding: 2px; margin: 5px; }_x000D_
button { margin: 2px 0; font-family: consolas; font-size: 11px; }_x000D_
pre { background: #eee; border: 1px solid #ccc; padding: 5px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>_x000D_
_x000D_
<div data-bind="foreach: items">_x000D_
<div class="parent">_x000D_
<span data-bind="text: txt"></span><br>_x000D_
<button data-bind="click: doStuff">click: doStuff</button><br>_x000D_
<button data-bind="click: $parent.doParentStuff">click: $parent.doParentStuff</button><br>_x000D_
<button data-bind="click: $root.doParentStuff">click: $root.doParentStuff</button><br>_x000D_
<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>_x000D_
<button data-bind="click: doOtherStuff.bind($data, 'test 123')">click: doOtherStuff.bind($data, 'test 123')</button><br>_x000D_
<button data-bind="click: function(data, event) { doOtherStuff('test 123', $data, event); }">click: function(data, event) { doOtherStuff($data, 'test 123', event); }</button><br>_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
Click log:_x000D_
<pre data-bind="text: log"></pre>**A note about the actual question...*
The actual question has one interesting bit:
// Uh oh! Modifying the DOM....
place.innerHTML = "somthing"
Don't do that! Don't modify the DOM like that when using an MVVM framework like KnockoutJS, especially not the piece of the DOM that is your own parent. If you would do this the button would disappear (if you replace your parent's innerHTML you yourself will be gone forever ever!).
Instead, modify the View Model in your handler instead, and have the View respond. For example:
function RootVm() {_x000D_
var self = this;_x000D_
self.buttonWasClickedOnce = ko.observable(false);_x000D_
self.toggle = function(data, event) {_x000D_
self.buttonWasClickedOnce(!self.buttonWasClickedOnce());_x000D_
};_x000D_
}_x000D_
_x000D_
ko.applyBindings(new RootVm());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>_x000D_
_x000D_
<div>_x000D_
<div data-bind="visible: !buttonWasClickedOnce()">_x000D_
<button data-bind="click: toggle">Toggle!</button>_x000D_
</div>_x000D_
<div data-bind="visible: buttonWasClickedOnce">_x000D_
Can be made visible with toggle..._x000D_
<button data-bind="click: toggle">Untoggle!</button>_x000D_
</div>_x000D_
</div>Source: Stackoverflow.com