用于点击事件绑定的淘汰通道$parent

Knockout pass $parent for click event binding

本文关键字：淘汰 通道 parent 绑定 事件 用于      更新时间：2023-09-26

我有这个代码：

<div id="menu">
  <ul data-bind="foreach: elements">
    <li>
      <span data-bind="text:domObj().tagName +' [' + classOriginal() + ']', click: $root.elementClick"></span>
      <ul class="menuclassitem" style="display:none" data-bind="foreach: classFixes">
        <li data-bind="text:$data, click:$root.classClick.bind($parent)"></li>
      </ul>
    </li>
  </ul>
</div>

如您所见，我正在尝试将$parent对象（"elements"数组中的当前项）传递给 $root.classClick 函数，但实际传递的值是当前内部循环的$data（当前"classFixes"数组的$data）

有没有人知道如何在classClick函数中使用$parent？

相当化石的问题，但它仍然可能对某人有所帮助。

这个问题更多地与.bind()的方式有关，而不是与KnockoutJS有关。所以首先我们需要了解 bind（） 是如何工作的：

bind（） 方法创建一个新函数，该函数在调用时具有其 此关键字设置为提供的值，具有给定的序列 调用新函数时提供的任何参数前面的参数。更多。。。

现在让我们回到问题。默认情况下，KnockoutJS 将当前$data作为click绑定接收的函数的第一个参数传递。将同一$data用作默认上下文。在@DorR编写click:$root.classClick.bind($parent)单击绑定后，单击绑定收到了一个具有重新定义的上下文（$parent）和预定义参数的函数，这允许KO将$data作为第一个参数传递。 $parent现在可以在classClick中作为this访问。

为了说明它是如何工作的，我在下面做了这个小片段。尝试单击不同列中的按钮并检查下面的调试日志，以查看KO传递的参数如何被.bind()预定义的参数向右移动 

function VM() {
  const self = this;
  self.debug = ko.observable('');
  self.catalog = [
    {
      name:'Section1',
      items:[
        {id:1,name:'Item1'},
        {id:2,name:'Item2'},
      ]
    },
    {
      name:'Section2',
      items:[
        {id:4,name:'Item4'},
      ]
    }
  ];
  
  self.orderClick = function(arg1,arg2,arg3,arg4) {
    let dbgText = "this:<br>&nbsp;&nbsp;&nbsp;";
    dbgText += JSON.stringify(this);
    dbgText += "<br>1st arg:<br>&nbsp;&nbsp;&nbsp;";
    dbgText += JSON.stringify(arg1);
    dbgText += "<br>2nd arg:<br>&nbsp;&nbsp;&nbsp;";
    dbgText += JSON.stringify(arg2);
    dbgText += "<br>3nd arg:<br>&nbsp;&nbsp;&nbsp;";
    dbgText += JSON.stringify(arg3);
    dbgText += "<br>4th arg:<br>&nbsp;&nbsp;&nbsp;";
    dbgText += JSON.stringify(arg4);
    self.debug(dbgText);
  }
}
ko.applyBindings(new VM())
table {
  border-collapse: collapse;width:100%;
}
td {
  border:1px solid #CCC;
  text-align:center;
  font-family:sans-serif;
  font-size:11px;
  white-space:nowrap;
}
button {
  display:block; margin:5px auto; 
}
.dbglog {
  padding:5px 10px;
  border:1px solid #AAA;
  background-color:#EEE;
  font-family:"Lucida Console", Monaco, monospace;
  font-size:12px;min-height:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table data-bind="foreach: catalog">
    <tr>
        <td colspan=10><b data-bind="text:$data.name"></b></td>
        <td>
          <table data-bind="foreach:$data.items" class=nested>
          <tr>
            <td width=10%> 
              <i data-bind="text:$data.name"></i>
            </td>
            <td width=30%> 
              no .bind()
              <button data-bind="click:$root.orderClick">click</button> 
            </td>
            <td width=30%> 
              .bind($parent) 
              <button data-bind="click:$root.orderClick.bind($parent)">click</button> 
            </td>
            <td width=30%> 
              .bind($parent,$data,'smthelse') 
              <button data-bind="click:$root.orderClick.bind($parent,$data,'text')">click</button> 
            </td>
          </tr>
        </table>
        </td>
    </tr>
</table>
<div class=dbglog data-bind="html:$root.debug"></div>

希望这个答案能帮助某人。 =）

classClick 函数中的 'this' 变量是 $parent。传递给 classClick 的第一个参数是 $data。这把小提琴演示

ko.applyBindings({
elements: [
    {
        classFixes : ["ab","cd"]
    },
    {
        classFixes : ["ef","gh"]
    }
 ],
 classClick : function(first)
 {
    alert(JSON.stringify(this));
    alert(JSON.stringify(first));
 }
});
相关文章：