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

Question

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

这会产生错误：

  

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

根据docs，不应该执行该函数，而不是试图将{{}}的函数名称附加到on-click吗？

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

Answer 1

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

即

<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”，并将该函数的名称作为字符串返回。

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，可以很容易地判断将要传递给函数的参数，并且可以在同一元素上为多个事件处理程序工作。