Polymer 如何在聚合物组件中绑定动态函数？

就我的聚合物知识而言，我可以

• 使用“on-*”语法将函数绑定到webcomponent方法

• 使用普通html js绑定（使用onClick=“…”）绑定全局窗口命名空间中可用的函数

但是我想将一个函数（作为datamodel对象的属性提供）绑定到webcomponent模板。 一个侧面说明：将datamodel对象移动到全局javascript命名空间（即window.*）不是一个选项

下面的示例不起作用，但正好反映了我的用例：

...
Polymer('x-foo', {

    items : [
      ...,
      {
        label  : "ExampleCommand",
        action : function() {
            // do something
        }            
      }
      ...
    ]
})
...
<template>
    <template repeat="{{item in items}}">
        <paper-button onClick="{{item.action}}">
            {{item.label}});
        </paper-button>
    </template>
</template>
... 

。。。
聚合物（“x-foo”{
项目：[
...,
{
标签：“ExampleCommand”，
行动：功能（）{
//做点什么
}            
}
...
]
})
...
{{item.label}}）；
... 

如果有人知道如何解决上述问题，还有一个问题）：我如何为函数提供附加参数

---

非常感谢任何帮助：-）

我不得不向团队询问这一点，因为这有点让人困惑。声明性事件“绑定”与聚合表达式不同。不幸的是，事件绑定和聚合表达式都使用

{{}

语法，这意味着它们的工作原理相同。他们没有。事件绑定的作用域是元素本身，而表达式的作用域是模板实例的模型

在Polymer 0.8中，我认为语法已经改变，因此事件绑定不再使用

{{}

。希望这会让事情变得明朗一点

为了达到您想要的效果，您可以在元素上定义一个方法，该方法查看事件目标，获取其模型，并调用您定义的函数

<polymer-element name="x-foo">
  <template>
    <template repeat="{{items}}">
      <button on-click="{{doAction}}">{{label}}</button>
    </template>
  </template>
  <script>
    Polymer({
      items: [
        {
          label: 'ExampleCommand',
          action: function() {
            alert('hello world');
          }
        },
        {
          label: 'AnotherCommand',
          action: function() {
            alert('another command');
          }
        }
      ],
      doAction: function(e) {
        e.target.templateInstance.model.action();
      }
    });
  </script>
</polymer-element>

{{label}}
聚合物({
项目：[
{
标签：“ExampleCommand”，
行动：功能（）{
警报（“你好世界”）；
}
},
{
标签：“另一个命令”，
行动：功能（）{
警报（“另一个命令”）；
}
}
],
doAction:函数（e）{
e、 target.templateInstance.model.action（）；
}
});

---

我不得不询问团队，因为这有点让人困惑。声明性事件“绑定”与聚合表达式不同。不幸的是，事件绑定和聚合表达式都使用

{{}

语法，这意味着它们的工作原理相同。他们没有。事件绑定的作用域是元素本身，而表达式的作用域是模板实例的模型

在Polymer 0.8中，我认为语法已经改变，因此事件绑定不再使用

{{}

。希望这会让事情变得明朗一点

为了达到您想要的效果，您可以在元素上定义一个方法，该方法查看事件目标，获取其模型，并调用您定义的函数

<polymer-element name="x-foo">
  <template>
    <template repeat="{{items}}">
      <button on-click="{{doAction}}">{{label}}</button>
    </template>
  </template>
  <script>
    Polymer({
      items: [
        {
          label: 'ExampleCommand',
          action: function() {
            alert('hello world');
          }
        },
        {
          label: 'AnotherCommand',
          action: function() {
            alert('another command');
          }
        }
      ],
      doAction: function(e) {
        e.target.templateInstance.model.action();
      }
    });
  </script>
</polymer-element>

{{label}}
聚合物({
项目：[
{
标签：“ExampleCommand”，
行动：功能（）{
警报（“你好世界”）；
}
},
{
标签：“另一个命令”，
行动：功能（）{
警报（“另一个命令”）；
}
}
],
doAction:函数（e）{
e、 target.templateInstance.model.action（）；
}
});

---

是唯一的解决方法吗？请注意：

onClick

应该是

on click

，如果要将其绑定到元素对象

onClick

是DOM事件，

on click

是Polymer事件（这也碰巧触发了

onClick

。我知道。但是“on click”（或者更好的是“on tap”）只能用于直接映射到webcomponent属性方法，但不能映射到子结构中的函数，如我所述。这就是我问这个问题的原因，dude。您不使用窗口注册函数有什么特殊原因吗？这就是我目前正在做的，将函数名作为元素属性传递，然后调用window[this.functionname]（e，d，s）-有什么问题吗？这是唯一的解决办法吗？注意：

onClick

应该是

on click

如果你想让Polymer绑定到你的元素对象。

onClick

是DOM事件，

on click

是Polymer事件（它也碰巧触发

onClick

。我知道。但是“on click”（最好是“随时可用”）只能用于直接映射到webcomponent属性方法，但不能映射到子结构中的函数，如我所述。这就是我问这个问题的原因，dude。您不使用窗口注册函数有什么特殊原因吗？这就是我目前正在做的，将函数名作为元素属性传递，然后调用window[此函数名]（e、d、s）-有什么问题吗？你所描述的是我在第一次评论中已经提出的解决办法。问题是：是否有一个更优雅的解决办法，看起来不像使用聚合物的有限选项的解决办法？我与聚合物团队交谈，上面的解决办法是我得到的建议。你所描述的是在我的第一次评论中已经提出了解决方案。问题是：是否有一个更优雅的解决方案，看起来不像是使用聚合物的有限选项的解决方案？我与聚合物团队交谈，上面的解决方案就是我得到的建议。