web-dev-qa-db-ja.com

KnockoutJSでonclickまたはクリックバインディングを使用してパラメーターを渡す

私はこの機能を持っています：

function make(place)
{
  place.innerHTML = "somthing"
}

私は普通のJavaScriptとhtmlでこれを行っていました。

<button onclick="make(this.parent)">click me</button>

慣用的なknockout.jsを使用してこれを行うにはどうすればよいですか？

javascripthtmlknockout.jsonclick
51
BlaShadow

Knockoutでクリックバインドを設定した場合、イベントは2番目のパラメーターとして渡されます。イベントを使用して、クリックが発生した要素を取得し、必要なアクションを実行できます。

以下に、フィドルを示します。 http://jsfiddle.net/jearles/xSKyR/

または、独自のカスタムバインディングを作成して、バインドされた要素を最初のパラメーターとして受け取ることもできます。初期化時に、独自のクリックイベントハンドラをアタッチして、必要なアクションを実行できます。

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());
31
John Earles

この例のように、バインディングを使用します。

<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);
    };
}();
80
Juliano Sales

これは古い質問ですが、ここに私の貢献があります。これらすべてのトリックの代わりに、単に関数を別の関数内にラップすることができます。私がここでやったように：

<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 です

26
Salvador Dali

Knockoutのドキュメントでは、on-clickこのようなfunction.bindを使用したバインディング：

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
    Click me
</button>
4
gazubi