淘汰JS中动态改变点击方式答案

【问题标题】：Dynamically changing the click method in knockout JS淘汰JS中动态改变点击方式
【发布时间】：2023-03-14 20:35:01
【问题描述】：

我正在使用淘汰模板在 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 实现这一目标？

提前致谢。

【问题讨论】：

您需要传递对 abc 函数的引用。不是“abc”字符串。
有什么特殊的属性可以用来传递引用吗？另外，我将如何在 click 属性中使用它？
您没有显示 abc 函数的位置。它是视图模型上的属性吗？
@CrimsonChris 这是个好问题！ abc 函数是使用 require JS 加载的，是另一个文件（名为 abc）中的定义模块。如何提取使用定义模块定义的函数并将其放入淘汰赛的点击中？
您可以require 函数，然后将其作为属性添加到模板的视图模型中。 vm.myClick = myRequiredFunction

标签： javascript html knockout.js

【解决方案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>

【讨论】：

我现在有一个问题。其中一个 abc 函数是使用 require JS 加载的，并且是另一个文件（名为 abc）中的定义模块。我如何提取使用定义模块定义的函数并将其放入淘汰赛的点击中？
您需要在构建视图模型时需要该模块，并使该函数成为成员。如果您需要更详细的说明，您需要发布一个新问题。

【解决方案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 是敲除使用的保留变量，可让您访问整个绑定上下文。避免完全使用名称“数据”。

【讨论】：