计算绑定不适用于单击（聚合物）

Question

<template is="dom-repeat" items="{{myItems}}">
    <div on-click="{{ComputedBindingFunction(item)}}">Foo</div>
</template>

这会产生一条错误消息：

listener method {{ComputedBindingFunction(item)}} not defined

不应该执行该函数，而不是根据 docs?

从字面上尝试将带有 {{}} 的函数名称附加到 on-click

注意 ComputedBindingFunction returns 一个函数。

Answer 1

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

即

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

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

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

...

从触发的事件

访问item

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

Answer 2

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

其次，即使他们这样做了（这在将来会非常酷），您的示例仍然无法运行，因为您从计算绑定返回一个函数而不是字符串。

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

示例：

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

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

computeFunction 创建一个新函数 "add" 并且 returns 这个函数的名称作为一个字符串。

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);
}

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

通过这种方式，只需查看 html 就可以很容易地判断哪些参数将传递给函数，并且适用于同一元素上的多个事件处理程序。

计算绑定不适用于单击（聚合物）

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

html

javascript

polymer

示例：

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

computeFunction 创建一个新函数 "add" 并且 returns 这个函数的名称作为一个字符串。