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

Question

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

这会产生一个错误:

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

不应该执行该函数,而不是根据文档尝试将函数名称附加到{{}}'s ？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来判断将要传递给函数的参数,并且可以在同一元素上使用多个事件处理程序.