计算绑定不适用于点击(聚合物）

Computed binding doesn't work with on-click (Polymer)

本文关键字：聚合物 绑定 不适用 适用于 计算      更新时间：2023-09-26
<template is="dom-repeat" items="{{myItems}}">
    <div on-click="{{ComputedBindingFunction(item)}}">Foo</div>
</template>

这会产生一个错误，指出：

未定义侦听器方法{{ComputedBindingFunction(item)}}

不应该执行该函数，而不是根据文档将函数名称与{{}}附加到on-click吗？

请注意，ComputedBindingFunction返回一个函数。

链接到的文档中显示的示例不是用于调用方法或触发事件，而是用于使用计算绑定。

即

<div>{{ComputedBindingFunction(item)}}</div>

如果您尝试触发事件，请移除大括号：

<div on-click="ComputedBindingFunction"></div>

。

从触发的事件访问item

ComputedBindingFunction: function(event){
   _ComputedBindingFunction(event.model.item)
}

首先，事件侦听器的属性（例如，点击时、点击时等）不允许将计算绑定作为参数，只允许作为字符串。

其次，即使他们这样做了，这在未来会非常酷，您的示例仍然不起作用，因为您从计算的绑定返回一个函数而不是一个字符串。

你的 computedFunction 应该返回你想要调用的函数的名称，该名称是使用触发事件时提供的参数定义的。

例：

HTML 聚合物事件处理程序属性

<div on-click="{{computeFunction(a, b}}">Button</div>

computeFunction 创建一个新函数"add"，并以字符串形式返回该函数的名称。

computeFunction: function(a, b) {
  functionName = "add";
  this[functionName] = function() {
    // Does whatever you want with arguments, a, b
    // Like maybe adding them together.
    return a + b
  }
  return functionName;
}
add: function(a, b) {
  return a + b;
}

这样，在点击事件发生时调用的名为"add"的函数将始终使用分配给它的新变量"a"和"b"。

在此功能可用之前（可能永远不会），您可以将参数存储在触发事件的元素的属性中。

<div on-click="someFunction" someFunction="{{item}}">Button</div>

someFunction: function(e) {
  // Current target is the node that fired the event,
  // It has our stored parameter "{{item}}" as a value of "someFunction"
  var item = e.currentTarget.getAttribute('someFunction');
  // Do something with item
  console.log(item);
}

如您所见，我将该项存储在一个属性中，该属性具有 on-click 事件调用的函数的名称。

这样，只需查看 html 就很容易知道哪些参数将传递给函数，并且适用于同一元素上的多个事件处理程序。

 

相关文章：