Question

我正在使用敲除模板在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

将上下文（视图模型）作为其data参数传递给模板。模板内的绑定基于该上下文。

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>

Answer 2

从淘汰赛文档（http://knockoutjs.com/documentation/click-binding.html）中可以找到您想要的内容：

<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
  Click me
</button>

在您的情况下，您将发送方法名称以进行调用。假设您的根视图模型上提供了此方法，则可以执行以下操作：

<template id="create-template">
   <button class="pagebuttons" data-bind="click: function(data, event) { $parent[data](data, event) }"></button>
    <!-- More code here -->
</template>

PS，$ data是knockout使用的保留变量，可让您访问整个绑定上下文。避免完全使用“数据”这个名称。

动态更改knockout JS中的click方法

2 个答案: