javascript - 动态改变knockout JS中的点击方法

Question

我正在使用 knockout 模板来显示 DOM 中的某些 HTML。我的情况是这样的，每次我想要一个与模板中的 div 类似的 div 时，我都会重新使用该模板。但是，每个动态创建的 div 都将具有具有不同单击方法的按钮。该方法的名称将通过模板的 data 属性传递:

<div class="module-container" data-bind="template: { name:'create-template', data:'abc' }">
</div>

模板如下所示:

<tmeplate id="create-template">
   <button class="pagebuttons" data-bind="click: $data"></button>
<!-- More code here -->
</template>

所以理想情况下，单击按钮时必须调用 abc，但这并没有发生(它实际上将 $data 视为方法名称。我尝试转义 $ 符号，但这也不起作用)。我怎样才能通过 knockout 实现这一目标？

提前致谢。

Answer 1

您将上下文( View 模型)作为模板的 data 参数传递给模板。模板内的绑定(bind)基于该上下文。

var vm = {};
vm.myClick = function() {
  alert("Clicked!");
};
vm.myLabel = 'Click me';

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<template id="create-template">
  <button class="pagebuttons" data-bind="click: theClick, text:label"></button>
  <!-- More code here -->
</template>
<div class="module-container" data-bind="template: { name:'create-template', data:{theClick:myClick, label:myLabel} }">
</div>