このような機能があります。
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でクリックバインディングを設定した場合、イベントは2番目のパラメータとして渡されます。 このイベントを利用して、クリックが発生した要素を取得し、必要なアクションを実行することができます。
ここでは、
を実演しています。また、独自のカスタムバインディングを作成して、バインドされている要素を第1パラメータとして受け取ることもできます。このバインディングは、バインドされている要素を第1パラメータとして受け取り、第1パラメータに独自のクリックイベントハンドラをアタッチして、好きな動作をさせることができます。
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][1]です。