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

Question

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

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

私はプレーンな JavaScript と html でこれを行っていました:

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

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

Answer 1

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

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

Answer 2

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

これを示すフィドルは次のとおりです。http://jsfiddle.net/jearles/xSKyR/

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

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());

Answer 3

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

<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());

そして、ここにフィドルがあります

Answer 4

clickKnockoutJS でイベントを処理する方法に関する一般的な回答...

尋ねられた質問に対する直接的な回答ではありませんが、おそらく、ここにたどり着いたほとんどの Google 社員が抱く質問に対するclick回答です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>

---

**実際の質問についてのメモ...*

実際の質問には、興味深い点が 1 つあります。

// Uh oh! Modifying the DOM....
place.innerHTML = "somthing"

そうしないでください！KnockoutJS などの MVVM フレームワークを使用する場合は、DOM をそのように変更しないでください。特に、自分の親である DOM の一部は変更しないでください。これを行うと、ボタンが消えます (親のボタンを置き換えると、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>

Answer 5

on-clickKnockout のドキュメントでは、次のように function.bind を使用してバインディングを使用してバインドされた関数に追加のパラメーターを渡す、よりクリーンな方法についても言及しています。

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