У меня есть эта функция:
function make(place)
{
place.innerHTML = "somthing"
}
Я использовал это с помощью обычного JavaScript и html:
<button onclick="make(this.parent)">click me</button>
Как это сделать, используя idiomatic knockout.js?
У меня есть эта функция:
function make(place)
{
place.innerHTML = "somthing"
}
Я использовал это с помощью обычного JavaScript и html:
<button onclick="make(this.parent)">click me</button>
Как это сделать, используя idiomatic knockout.js?
Если вы настроили привязку кликов в Knockout, событие передается как второй параметр. Вы можете использовать это событие, чтобы получить элемент, в котором произошел щелчок, и выполнить любое действие, которое вы хотите.
Вот скрипка, которая демонстрирует: http://jsfiddle.net/jearles/xSKyR/
В качестве альтернативы вы можете создать свою собственную привязку, которая получит элемент, к которому он привязан, в качестве первого параметра. В init вы можете прикрепить свой собственный обработчик события click для выполнения любых действий.
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());
И вот fiddle
Общий ответ о том, как обрабатывать события click
с помощью KnockoutJS...
Не сразу ответ на вопрос, как было задано, но, вероятно, ответ на вопрос о том, что большинство приключений Googlers здесь: используйте привязку click
от KnockoutJS вместо 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="https://cdnjs.cloudflare.com/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>
Документация нокаута также упоминает гораздо более простой способ передачи дополнительных параметров функциям, связанным с использованием привязки on-click
, используя функцию .bind следующим образом:
<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
Click me
</button>