이 기능이 있습니다:
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);
};
}();
녹아웃에서 클릭 바인딩을 설정하면 이벤트가 두 번째 매개변수로 전달됩니다. 이 이벤트를 사용하여 클릭이 발생한 요소를 가져와 원하는 작업을 수행할 수 있습니다.
다음은 이를 보여주는 바이올린 예시입니다:
또는 바인딩된 요소를 첫 번째 매개변수로 받는 사용자 지정 바인딩을 직접 만들 수도 있습니다. 초기화할 때 클릭 이벤트 핸들러를 첨부하여 원하는 작업을 수행할 수 있습니다.
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());
그리고 여기 [바이올린][1]이 있습니다.
하지만 아마도 묻는 질문에 대한 답을 아닌 것처럼 똑바로 질문에 대한 답을 갖고 있는 대부분의 구글러 소개 여기. 이 '클릭' 에서 바인딩하면 크노쿠티스 사용하여 온 클릭 '대신'. 다음과 같습니다.
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
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"
대신 볼 수 있는 뷰 (view) 모델 수정하십시오 처리기에서 대신 갖고 있는 목격하고서야 . 예를 들면 다음과 같습니다.
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
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>
끝 - < 스니핏 >;!