Передача параметра с помощью onclick или привязки по щелчку мыши в KnockoutJS
У меня есть такая функция:
function make(place)
{
place.innerHTML = "somthing"
}Раньше я делал это с помощью обычного JavaScript и html:
<button onclick="make(this.parent)">click me</button>Как я могу сделать это, используя идиоматический knockout.js?
Используйте привязку, как в этом примере:
<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);
};
}();
Если вы установите привязку по щелчку в Knockout, событие будет передано в качестве второго параметра. Вы можете использовать событие, чтобы получить элемент, на котором произошел щелчок, и выполнить любое действие, которое вы хотите.
Вот скрипка, которая демонстрирует это:
.В качестве альтернативы вы можете создать свою собственную привязку, которая будет получать элемент, к которому она привязана, в качестве первого параметра. При инициализации вы можете подключить свой собственный обработчик события щелчка, чтобы выполнить любые действия, которые вы хотите.
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());
Я знаю, что это старый вопрос, но вот мой вклад. Вместо всех этих трюков вы можете просто обернуть функцию внутри другой функции. Как я сделал здесь:
<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
Универсального ответа о том, как обрабатывать нажатия на события с KnockoutJS...
Не прямой ответ на вопрос, как просили, но, вероятно, ответ на вопрос большинство гуглеров, посадка здесь: используйте привязка "клик" от KnockoutJS вместо щелчку. Как это:
в
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>в
*Заметка о реальных вопрос...
Собственно вопрос есть один интересный:
// Uh oh! Modifying the DOM....
place.innerHTML = "somthing"Дон'т сделать это! Дон'т изменить дом, как, используя шаблон MVVM Framework как KnockoutJS, тем более не кусок дом собственного родителя. Если вы бы этого кнопку исчезнет (если вы замените ваш родитель'innerHTML будет ы `` вы сами будете ушел навсегда когда-нибудь!).
Вместо этого необходимо изменить представление модели в обработчике вместо этого, и имеют вид ответить. Например:
в
function RootVm() {
var self = this;
self.buttonWasClickedOnce = ko.observable(false);
self.toggle = function(data, event) {
self.buttonWasClickedOnce(!self.buttonWasClickedOnce());
};
}
ko.applyBindings(new RootVm());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div>
<div data-bind="visible: !buttonWasClickedOnce()">
<button data-bind="click: toggle">Toggle!</button>
</div>
<div data-bind="visible: buttonWasClickedOnce">
Can be made visible with toggle...
<button data-bind="click: toggle">Untoggle!</button>
</div>
</div>в
Нокаут's документация также упоминается гораздо чище способ передачи дополнительных параметров в функции связаны с использованием на кнопку привязку с помощью функции`.связать такой:
<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
Click me
</button>
