Question

我有这段代码：

<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 loop（当前“classFixes”数组的$ data）

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

Answer 1

classClick函数中的'this'变量是$ parent。传递给classClick的第一个参数是$ data。 This fiddle demonstrates

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

Answer 2

一个化石问题，但仍然可以帮助某人。

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

bind（）方法创建一个新函数，该函数在调用时具有此关键字设置为提供的值，并具有给定的顺序调用新函数时所提供的任何参数之前的参数。 more...

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

为了说明它是如何工作的，我在下面做了这个小片段。尝试单击不同列中的按钮，然后查看下面的调试日志，以查看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>

希望此答案对某人有帮助。 =）

Knockout传递$ parent用于click事件绑定

2 个答案: